firestore - 从 firestore 数据收集中填充选择选项答案

【问题标题】：firestore - populate select options from firestore data collectionfirestore - 从 firestore 数据收集中填充选择选项
【发布时间】：2019-10-10 14:41:14
【问题描述】：

我正在尝试学习如何将 react 与 firestore 一起使用。

我的表单中有 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
        });
    }

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

Uncaught (in promise) TypeError: Cannot read property 'replace' of 未定义

初始状态定义为：

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

    }

在渲染方法中，我将 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(/( )/g, '')

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

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

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

【讨论】：