Question

我正在尝试学习如何在firestore中使用react。

我的表单中有2个选择选项，每个选择选项都由存储在firestore中的不同记录填充。

当我只使用一个Firestore集合时，我已经开始工作了，但是现在我想添加第二个，我遇到了麻烦。

我的表单具有名为abs_for_codes和anzic_codes的集合。

我有此功能可以加载它们：

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

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

我可以在控制台中看到第一个集合已完全加载，并且第二个集合中的第一个文档在此错误出现之前已加载：

未捕获（承诺）TypeError：无法读取的属性“替换” 未定义

初始状态定义为：

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

    }

在render方法中，我将const定义为：

const { options } = this.state; 
const { anzic } = this.state;

表单字段为：

anz_for_codes

<Select
                                                    key={`my_unique_select_keyfieldOfResearch`}
                                                    name="fieldOfResearch"
                                                    isMulti
                                                    className={
                                                        "react-select-container" +
                                                        (errors.fieldOfResearch && touched.fieldOfResearch
                                                        ? " is-invalid"
                                                        : "")
                                                    }
                                                    classNamePrefix="react-select"
                                                    value={values.fieldOfResearch}

                                                    onChange={selectedOptions => {
                                                        // Setting field value - name of the field and values chosen.
                                                        setFieldValue("fieldOfResearch", selectedOptions)}
                                                        }
                                                    onBlur={setFieldTouched}
                                                    options={options}
                                                    />    

                                                    {errors.fieldOfResearch && touched.fieldOfResearch && 
                                                    <ErrorMessage
                                                    name="fieldOfResearch"
                                                    component="div"
                                                    className="invalid-feedback d-block"
                                                />}

anzic_codes

<Select
                                                    key={`my_unique_select_keyindustrySector`}
                                                    name="industrySector"
                                                    isMulti
                                                    className={
                                                        "react-select-container" +
                                                        (errors.industrySector && touched.industrySector
                                                        ? " is-invalid"
                                                        : "")
                                                    }
                                                    classNamePrefix="react-select"
                                                    value={values.industrySector}

                                                    onChange={selectedOptions => {
                                                        // Setting field value - name of the field and values chosen.
                                                        setFieldValue("industrySector", selectedOptions)}
                                                        }
                                                    onBlur={setFieldTouched}
                                                    options={anzic}
                                                    />    

                                                    {errors.industrySector && touched.industrySector && 
                                                    <ErrorMessage
                                                    name="industrySector"
                                                    component="div"
                                                    className="invalid-feedback d-block"
                                                />}

我唯一使用replace的地方是组件执行了挂载功能，

我实际上不知道此段的含义（或如何找到参考源以弄清楚该段）：

replace(/( )/g, '')

所以不确定我要去哪里。它在abs_for_codes中有效，但在anzic_codes中似乎不正确。如果我从函数中删除了该片段，则会在options数组中填充undefined作为标题，然后填充ANZIC代码（这是正确的数字）。

Answer 1

啊-这真的很明显。抱歉-希望对您有所帮助。 “标题”区分大小写。我的文档集合在azic代码表中将该字段命名为“ Title”。希望这对其他人有帮助。

firestore-填充firestore数据收集中的选择选项

1 个答案: