3

我正在尝试react-hook-form制作一个选择菜单，可以从中选择多个选项。

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

在formik中，我已经成功地使用这个componentDidMount异步方法从数据库中获取记录并将它们提供给 select 方法。我不能让它与反应钩子一起工作。

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
        });
    }

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

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);

谁能看到我哪里出错了？

我不知道如何用componentDidMount与 react-hook-form 一起使用的东西来替换它。

4

1 回答 1

0

UsinguseEffect在 using 时执行相同的行为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([]);
于 2021-05-29T16:10:55.143 回答