React：当要填充多个字段时如何设置状态

Question

我正在努力学习 React。

我有一个表单，它使用 firestore 数据来填充数组，这些数组是两个表单字段中的 select 字段。每个都为其数组使用不同的 firestore 集合。

当我只有一个数组可以使用时，一切正常。我加了一秒钟，不知道我做错了什么。

我的表格有：

state = {
        options: [],
        anzic: [],

    }

    async componentDidMount() {
        // const fsDB = firebase.firestore(); // Don't worry about this line if it comes from your config.
        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
        });
    }

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

    handleSubmit = (formState, { resetForm }) => {
        const payload = {
            ...formState,
            fieldOfResearch: formState.fieldOfResearch.map(t => t.value),
            industrySector: formState.industrySector.map(t => t.value),
            createdAt: firebase.firestore.FieldValue.serverTimestamp()
            }
            console.log("formvalues", payload);

        fsDB
            .collection("funding_mandate")
            .add(payload)
            .then(docRef => {
            console.log("docRef>>>", docRef);
            resetForm(initialValues);
            })
            .catch(error => {
            console.error("Error adding document: ", error);
            });
    };

    render() {
        const { options } = this.state.options; 
        const { anzic } = this.state.anzic;

原来render方法只有：

const { options } = this.state;

效果很好。如果我为 anzic 复制它，那么选项的选项数组在呈现时是表单中的一个空列表。

我实际上不明白这些常量是什么 - 所以我正在努力向其他使用事件处理程序更新表单的人学习。我认为这种方法可能不适用于这种情况，因为我使用 formik 作为表单。

我在设置数组状态时是否遗漏了什么？

Answer 1

你有两个componentDidMount移除另一个并使用一个。

async componentDidMount() {
  // const fsDB = firebase.firestore(); // Don't worry about this line if it comes from your config.
  let options = [];
  let anzic = [];

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

  await fsDB
    .collection('anzic_codes')
    .get()
    .then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
        console.log(doc.id, ' => ', doc.data());
        anzic.push({
          value: doc.data().Title.replace(/( )/g, ''),
          label: doc.data().Title + ' - ANZIC ' + doc.id
        });
      });
    });
  this.setState({
    options,
    anzic
  });
}

React：当要填充多个字段时如何设置状态

React: how to set state when there is more than one field to populate

firebase

reactjs

react-select

google-cloud-firestore

formik