Question

我正在尝试使用a_19 = np.zeros((m,n))进行选择菜单，从中可以选择多个选项。

我有一个数据库数组，其中包含要用于填充选择菜单的记录。

在react-hook-form中，我已成功使用此formik异步方法从数据库中获取记录并将它们提供给select方法。我无法将其与react挂钩一起使用。

componentDidMount

然后，我可以在选择菜单中使用const来获取下拉菜单项，如下所示：

state = {
      options: [],
    }

    async componentDidMount() {
        let options = [];
        await fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
        querySnapshot.forEach(function(doc) {
            console.log(doc.id, ' => ', doc.data());
            options.push({
                value: doc.data().title.replace(/( )/g, ''),
                label: doc.data().title + ' - ABS ' + doc.id
            });
            });
        });
        this.setState({
            options
        });
    }

我无法使它以React hook形式工作，我正在尝试学习如何options={options}，我认为应该useEffect才能代替这种方法。

但是，我不知道如何开始。

我当前的表单位于一个片段中（这样我就可以在前端的其余部分中继续使用antd）：

import React from "react";
import useForm from "react-hook-form";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { StateMachineProvider, createStore } from "little-state-machine";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import { fsDB, firebase, settings } from "../../../firebase";

import updateAction from "./updateAction";
import "./styles.css";


createStore({
  data: {}
});


const General = props => {
  const { register, handleSubmit, errors } = useForm();
  const { action } = useStateMachine(updateAction);
  const onSubit = data => {
    action(data);
    props.history.push("./ProposalMethod");
  };

  return (

      <React.Fragment>
        <form onSubmit={handleSubmit(onSubit)}>
          <h2>Part 1: General</h2>
          <label>
            Title
            <input 
              type="text" 
              name="title"  
              placeholder="The title " 
              ref={register({ required: true })} 
            />
          </label>
          {errors.title && <p id="titleError">A title is required</p>}

          <label>
            Subtitle
            <input 
              type="text" 
              name="subtitle"  
              placeholder="An optional subtitle" 
              ref={register} 
            />
          </label>

          <label>Select your fields </label>
          <Select 
            name="field" 
            placeholder="Select" 
            options={options}
          />
          <input type="submit" value="next" />

        </form>
      </React.Fragment>  
  );
}; 

export default withRouter(General);

有人可以看到我要去哪里了吗？

我不知道如何用适用于react-hook-form的东西替换componentDidMount。

Answer 1

在使用useEffect时使用componentDidMount执行相同的行为，您应该在useEffect方法内部调用相同的操作，但在其中创建一个函数，然后调用它：

useEffect(() => {
    populateOptions() => {
        let options = [];
            await fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
            querySnapshot.forEach(function(doc) {
                console.log(doc.id, ' => ', doc.data());
                options.push({
                    value: doc.data().title.replace(/( )/g, ''),
                    label: doc.data().title + ' - ABS ' + doc.id
                });
            });
        });
    }
    populateOptions();
}, []);

然后您可以在 options={options} 中使用 <select>。请记住，使用钩子你的选择应该是使用 useState 钩子：

const [options, setOptions] = useState([]);

反应挂钩形式-填充选择许多选项数组

1 个答案: