Question

我正在尝试学习反应。

我有一个表单，该表单使用Firestore数据填充作为两个表单字段中选择字段的数组。每个阵列都使用不同的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;

那很好。如果我将其复制为anic，则options的options数组在呈现时为窗体中的空列表。

我实际上并不了解这些const是什么-因此，我正在努力学习使用事件处理程序更新其表单的其他人。我认为这种方法在这种情况下可能并不适用，因为我将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：当要填充多个字段时如何设置状态

1 个答案: