Question

我正在尝试在我的react应用程序中使用一个options数组，该数组将react-select用于表单以及将选项存储在firebase集合中的位置。

当我使用带有键值对定义的选项数组定义表单中的const时，这一切都很好，但我正在努力找出如何用Firebase（Cloud Firestore）中存储的集合替换该数组）。

在我的表格中，我目前有：

const options = [
  { value: "neurosciences", label: "Neurosciences - ABS 1109" },
  { value: "oncologyCarcinogenesis", label: "Oncology and Carcinogenesis  - ABS 1112" },
  { value: "opticalPhysics", label: "Optical Physics  - ABS 0205" },
  { value: "fisheriesSciences", label: "Fisheries Sciences - ABS 0704" },
  { value: "genetics", label: "Genetics - ABS 0604" },
  { value: "urbanRegionalPlanning", label: "Urban and Regional Planning - ABS 1205" }
];

我想用一个映射数据库集合中文档标题的映射替换该数组。

我数据库中的文档名称具有键，并且每个文档都有一个名为“ title”的字段。

在我的表单中，选择我有：

<div className="form-group">
                            <label htmlFor="fieldOfResearch">
                            Select your field(s) of research
                            </label>

                            <Select
                            key={`my_unique_select_key__${fieldOfResearch}`}
                            name="fieldOfResearch"
                            isMulti
                            className={
                                "react-select-container" +
                                (errors.fieldOfResearch && touched.fieldOfResearch ? " is-invalid" : "")
                            }
                            classNamePrefix="react-select"
                            value={this.state.selectedValue1}
                            onChange={e => {
                                handleChange1(e);
                                this.handleSelectChange1(e);
                            }}
                            onBlur={setFieldTouched}
                            options={options}
                            />
                            {errors.fieldOfResearch && touched.fieldOfResearch && 
                            <ErrorMessage
                            name="fieldOfResearch"
                            component="div"
                            className="invalid-feedback d-block"
                            />}
                            </div>

我已经阅读了有关使用数组的firebase文档，但是我错过了一些（可能很明显）的东西，导致我无法使用20种不同的方法进行操作。

我不确定这是否相关，但是我的表单是使用Formik构建的。

如何用firebase数据库集合中的键值对映射替换const选项数组？

我试图将选项常量定义为：

const options = fsDB.collection("abs_for_codes")

，但是页面充满了我无法解读的错误。我已经阅读了此用户指南，但不了解与索引有关的说明，甚至不清楚它们是否是解决此问题所需要的。

https://firebase.google.com/docs/firestore/query-data/queries

我也尝试过：

const options = fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
    querySnapshot.forEach(function (doc))
}

但这只是从试图弄清文档意义上的猜测。

当我尝试在firebase文档中显示的确切公式时，

const options = fsDB.collection("abs_for_codes");

options.get().then(function (querySnapshot) {
    querySnapshot.forEach(function (doc) {
        console.log(doc.id, ' => ', doc.data());
    });
});

我得到一整页的难以理解的错误消息，如下所示：

TypeError: options.reduce is not a function
Select.buildMenuOptions
node_modules/react-select/dist/react-select.esm.js:4123
  4120 |   };
  4121 | };
  4122 | 
> 4123 | return options.reduce(function (acc, item, itemIndex) {
       | ^  4124 |   if (item.options) {
  4125 |     // TODO needs a tidier implementation
  4126 |     if (!_this3.hasGroups) _this3.hasGroups = true;
View compiled
new Select
node_modules/react-select/dist/react-select.esm.js:3593
  3590 | 
  3591 | var _selectValue = cleanValue(value);
  3592 | 
> 3593 | var _menuOptions = _this.buildMenuOptions(_props, _selectValue);
       | ^  3594 | 
  3595 | _this.state.menuOptions = _menuOptions;
  3596 | _this.state.selectValue = _selectValue;
View compiled
constructClassInstance
node_modules/react-dom/cjs/react-dom.development.js:11787
  11784 |     new ctor(props, context); // eslint-disable-line no-new
  11785 |   }
  11786 | }
> 11787 | var instance = new ctor(props, context);
        | ^  11788 | var state = workInProgress.memoizedState = instance.state !== null && instance.state !== undefined ? instance.state : null;
  11789 | adoptClassInstance(workInProgress, instance);
  11790 | {
View compiled
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:15265
  15262 |   } // In the initial pass we might need to construct the instance.
  15263 | 
  15264 | 
> 15265 |   constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
        | ^  15266 |   mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
  15267 |   shouldUpdate = true;
  15268 | } else if (current$$1 === null) {
View compiled
beginWork
node_modules/react-dom/cjs/react-dom.development.js:16265
  16262 | 
  16263 |     var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
  16264 | 
> 16265 |     return updateClassComponent(current$$1, workInProgress, _Component2, _resolvedProps, renderExpirationTime);
        | ^  16266 |   }
  16267 | 
  16268 | case HostRoot:
View compiled
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:20285
  20282 |   startProfilerTimer(workInProgress);
  20283 | }
  20284 | 
> 20285 | next = beginWork(current$$1, workInProgress, nextRenderExpirationTime);
        | ^  20286 | workInProgress.memoizedProps = workInProgress.pendingProps;
  20287 | 
  20288 | if (workInProgress.mode & ProfileMode) {
View compiled
workLoop
node_modules/react-dom/cjs/react-dom.development.js:20326
  20323 | if (!isYieldy) {
  20324 |   // Flush work without yielding
  20325 |   while (nextUnitOfWork !== null) {
> 20326 |     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
        | ^  20327 |   }
  20328 | } else {
  20329 |   // Flush asynchronous work until there's a higher priority event
View compiled
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:147
  144 |     window.event = windowEvent;
  145 |   }
  146 | 
> 147 |   func.apply(context, funcArgs);
      | ^  148 |   didError = false;
  149 | } // Create a global error event handler. We use this to capture the value
  150 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:196
  193 | // errors, it will trigger our global error handler.
  194 | 
  195 | evt.initEvent(evtType, false, false);
> 196 | fakeNode.dispatchEvent(evt);
      | ^  197 | 
  198 | if (windowEventDescriptor) {
  199 |   Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:250
  247 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
  248 |   hasError = false;
  249 |   caughtError = null;
> 250 |   invokeGuardedCallbackImpl$1.apply(reporter, arguments);
      | ^  251 | }
  252 | /**
  253 |  * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
replayUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:19509
  19506 | 
  19507 | isReplayingFailedUnitOfWork = true;
  19508 | originalReplayError = thrownValue;
> 19509 | invokeGuardedCallback(null, workLoop, null, isYieldy);
        | ^  19510 | isReplayingFailedUnitOfWork = false;
  19511 | originalReplayError = null;
  19512 | 
View compiled
renderRoot
node_modules/react-dom/cjs/react-dom.development.js:20439
  20436 | if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
  20437 |   if (mayReplay) {
  20438 |     var failedUnitOfWork = nextUnitOfWork;
> 20439 |     replayUnitOfWork(failedUnitOfWork, thrownValue, isYieldy);
        | ^  20440 |   }
  20441 | } // TODO: we already know this isn't true in some cases.
  20442 | // At least this shows a nicer error message until we figure out the cause.
View compiled
performWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:21363
  21360 |   cancelTimeout(timeoutHandle);
  21361 | }
  21362 | 
> 21363 | renderRoot(root, isYieldy);
        | ^  21364 | finishedWork = root.finishedWork;
  21365 | 
  21366 | if (finishedWork !== null) {
View compiled

另一种尝试：

const options = abs_for_codes.map((title) => {
    <option key={title}
    value={id} />
}

这也不起作用-我尝试了它，因为它看起来类似于react arrays指令。

所附图像显示了Firestore中的数据结构。

下一个尝试

我使用Murray的建议，尝试了

import Select from "react-select";
import { fsDB, firebase, settings } from "../../../firebase";

let options = [];

const initialValues = {
  fieldOfResearch: null,

}


class ProjectForm extends React.Component {
  state = {
    selectedValue1: options,
}

handleSelectChange1 = selectedValue1 => {
    this.setState({ selectedValue1 });
  };


componentDidMount() {
    fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
        let newOptions = [];
        querySnapshot.forEach(function (doc) {
            console.log(doc.id, ' => ', doc.data());
            newOptions.push({
              value: doc.data().title.replace(/( )/g, ''),
              label: doc.data().title + ' - ABS ' + doc.id
            });
        });
        this.setState({options: newOptions});
    });
}


handleSubmit = (formState, { resetForm }) => {
    // Now, you're getting form state here!
    console.log("SUCCESS!! :-)\n\n", formState);
    fsDB
      .collection("project")
      .add(formState)
      .then(docRef => {
        console.log("docRef>>>", docRef);
        this.setState({ selectedValue1: null });
        this.setState({ selectedValue2: null });
        this.setState({ selectedValue3: null });
        this.setState({ selectedValue4: null });
        this.setState({ selectedValue5: null });
        this.setState({ selectedValue6: null });

        resetForm(initialValues);
      })
      .catch(error => {
        console.error("Error adding document: ", error);
      });
  };


onSubmit={this.handleSubmit}
        render={({ errors, status, touched, setFieldTouched, handleSubmit, values }) => {
          let fieldOfResearch;
          const handleChange1 = optionsObject => {
            fieldOfResearch = optionsObject;
            return (values.fieldOfResearch = optionsObject.value);
          };

<div className="form-group">
                                <label htmlFor="fieldOfResearch">
                                Select your field(s) of research
                                </label>

                                <Select
                                key=
{`my_unique_select_key__${fieldOfResearch}`}
                                name="fieldOfResearch"
                                isMulti
                                className={
                                    "react-select-container" +
                                    (errors.fieldOfResearch && touched.fieldOfResearch ? " is-invalid" : "")
                                }
                                classNamePrefix="react-select"
                                value={this.state.selectedValue1}
                                onChange={e => {
                                    handleChange1(e);
                                    this.handleSelectChange1(e);
                                }}
                                onBlur={setFieldTouched}
                                options={options}
                                />
                                {errors.fieldOfResearch && touched.fieldOfResearch && 
                                <ErrorMessage
                                name="fieldOfResearch"
                                component="div"
                                className="invalid-feedback d-block"
                                />}
                                </div>

因此，逐步地，选项从一个空数组开始，ComponentDidMount函数将其状态重置为NewOptions，并将其馈送到选择下拉列表中。

这对我来说很有意义，但是不起作用-我只能得到一个空数组。

当我尝试Avanthika的建议时，我可以呈现表单，并且可以从正确的db集合中选择多个选项，但是提交表单时什么也没有发生。 react中的控制台调试器显示出一张笑脸（我从未见过。下面的图片）。删除选择字段后，此表单可以很好地提交。

下次尝试

当我尝试以下Murray R和Avinthika的更新建议时，我可以选择多个字段。但是我不能提交表格。如果我删除选择字段，则提交表单。提交Formik多字段表单有技巧吗？

我的提交按钮是：

<div className="form-group">
                <Button
                  variant="outline-primary"
                  type="submit"
                  style={style3}
                  id="ProjectId"
                  onClick={handleSubmit}
                  disabled={!dirty || isSubmitting}

                >
                  Save
                </Button>
              </div>

我的句柄提交有：

handleSubmit = (formState, { resetForm }) => {
    // Now, you're getting form state here!
    console.log("SUCCESS!! :-)\n\n", formState);
    fsDB
      .collection("project")
      .add({
          ...(formState),
          createdAt: firebase.firestore.FieldValue.serverTimestamp()
      })
      .then(docRef => {
        console.log("docRef>>>", docRef);
        this.setState({ selectedValue1: null, selectedValue2: null, selectedValue3: null, selectedValue4: null, selectedValue5: null, selectedValue6: null });

        // this.setState({ selectedValue1: null });
        // this.setState({ selectedValue2: null });
        // this.setState({ selectedValue3: null });
        // this.setState({ selectedValue4: null });
        // this.setState({ selectedValue5: null });
        // this.setState({ selectedValue6: null });

        resetForm(initialValues);
      })
      .catch(error => {
        console.error("Error adding document: ", error);
      });
  };

控制台不记录任何内容。

下次尝试

我移除并重新安装了chrome扩展插件，然后又可以正常工作了。

所附的屏幕截图显示了该表单尚未验证且未提交，但是每个表单值的状态都在其中-您可以看到该屏幕底部的表单字段值之一为“ s'。

进一步的尝试

所以-我将此表单拆分为仅具有一个字段的表单-我一直在此处尝试处理的选择字段。

该表格整体具有：

import React from 'react';

import { Formik, Form, Field, ErrorMessage, withFormik } from "formik";
import * as Yup from "yup";
import Select from "react-select";
import { fsDB, firebase, settings } from "../../../firebase";

import {
    Badge,
    Button,
    Col,
    ComponentClass,
    Feedback,
    FormControl,
    FormGroup,
    FormLabel,
    InputGroup,
    Table,
    Row,
    Container
  } from "react-bootstrap";

const initialValues = {
    fieldOfResearch: null,
}


class ProjectForm extends React.Component {
    state = {
      options: [],  
      selectedValue1: [],
    }

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


  handleSelectChange1 = selectedValue1 => {
    this.setState({ selectedValue1 });
  };

  handleSubmit = (formState, { resetForm }) => {
    // Now, you're getting form state here!
    console.log("SUCCESS!! :-)\n\n", formState);
    fsDB
      .collection("project")
      .add({
          ...(formState),
          createdAt: firebase.firestore.FieldValue.serverTimestamp()
      })
      .then(docRef => {
        console.log("docRef>>>", docRef);
        this.setState({ selectedValue1: null});


        resetForm(initialValues);
      })
      .catch(error => {
        console.error("Error adding document: ", error);
      });
  };

  render() {
    const { options } = this.state;  
    return (
      <Formik
        initialValues={initialValues}
        validationSchema={Yup.object().shape({
          //   fieldOfResearch: Yup.array().required("What is your field of research?"),
        })}

        onSubmit={this.handleSubmit}
        render={({ errors, status, touched, setFieldTouched, handleSubmit, isSubmitting, dirty, values }) => {
          let fieldOfResearch;
          const handleChange1 = optionsObject => {
            fieldOfResearch = optionsObject;
            return (values.fieldOfResearch = optionsObject.value);
          };
          return (
            <div>
            <Form>
                <div className="form-group">

                                <label htmlFor="fieldOfResearch">
                                Select your field(s) of research
                                </label>
                                <Select
                                    key={`my_unique_select_key__${fieldOfResearch}`}
                                    name="fieldOfResearch"
                                    isMulti
                                    className={
                                        "react-select-container" +
                                        (errors.fieldOfResearch && touched.fieldOfResearch
                                        ? " is-invalid"
                                        : "")
                                    }
                                    classNamePrefix="react-select"
                                    value={this.state.selectedValue1}
                                    onChange={e => {
                                        handleChange1(e);
                                        this.handleSelectChange1(e);
                                    }}
                                    onBlur={setFieldTouched}
                                    options={options}
                                    />    

                                {errors.fieldOfResearch && touched.fieldOfResearch && 
                                <ErrorMessage
                                name="fieldOfResearch"
                                component="div"
                                className="invalid-feedback d-block"
                                />}
                                </div> 
                                <div className="form-group">
                                <Button
                                  variant="outline-primary"
                                  type="submit"
                                  id="ProjectId"
                                  onClick={handleSubmit}
                                //   disabled={!dirty || isSubmitting}

                                >
                                  Save
                                </Button>
                              </div>
                              </Form>

            </div>
        );
    }}
  />
);
}
}

export default ProjectForm;

此表格允许您选择表格中的研究领域。提交功能在控制台中有效，其范围是使用fieldOfResearch将成功记录为“未定义”。没有任何东西可以保留到数据库。

错误消息显示：未处理的拒绝（FirebaseError）：功能使用无效数据调用的DocumentReference.set（）。不支持的字段值：未定义（可在字段fieldOfResearch中找到）▶

当我尝试输入字段值并检查反应值时，错误消息显示：

未捕获的TypeError：无法将未定义或null转换为对象

Answer 1

另一个更新的答案：

错误消息显示：未处理的拒绝（FirebaseError）：功能使用无效数据调用的DocumentReference.set（）。不支持的字段值：未定义（可在字段fieldOfResearch中找到

发生此错误是因为您的表单值无效。您没有保持适当的formik状态。

我刚刚尝试过并检查过，表单提交对我来说非常有用。您编写了太多多余的代码-我们只需要本机的formik方法和firebase。更改日志如下：

react-select的onChange应该使用来自Formik的setFieldValue，如下所示：

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

初始值应为空数组。由于我们声明了initialValues并通过Formik维护了formvalues，因此绝对不需要内部状态管理。即，不需要this.state.selectedValue1，handleChange1和handleSelectChange1。如果您查看Formik HOC的render（），您会注意到values-每次更改后都会给出表单的当前值。

所以

value={this.state.selectedValue1}

应更改为

value={values.fieldOfResearch}

我已经这样编写了handleSubmit-您的代码的精确副本。但是我只是从所选选项的数组中提取值：

handleSubmit = (formState, { resetForm }) => {
  // Now, you're getting form state here!
  const fdb = firebase.firestore();
  const payload = {
    ...formState,
    fieldOfResearch: formState.fieldOfResearch.map(t => t.value)
  }
  console.log("formvalues", payload);
  fdb
  .collection("project")
  .add(payload)
  .then(docRef => {
    console.log("docRef>>>", docRef);
    resetForm(initialValues);
  })
  .catch(error => {
    console.error("Error adding document: ", error);
  });
}

我可以在控制台中看到表单提交和docRef。表单也将重置为初始状态。

import React from "react";
import { Formik, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import Select from "react-select";
import firebase from "./firebase";
import {
  Button,
  Container
} from "react-bootstrap";

const initialValues = {
  fieldOfResearch: []
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: []
    };
  }

  async componentWillMount() {
    const fdb = firebase.firestore();
    let options = [];
    await fdb
      .collection("abs_codes")
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          options.push({
            value: doc.data().title.replace(/( )/g, ""),
            label: doc.data().title
          });
        });
      });
    this.setState({
      options
    });
  }

  handleSubmit = (formState, { resetForm }) => {
    // Now, you're getting form state here!
    const fdb = firebase.firestore();
    const payload = {
      ...formState,
      fieldOfResearch: formState.fieldOfResearch.map(t => t.value)
    }
    console.log("formvalues", payload);
    fdb
    .collection("project")
    .add(payload)
    .then(docRef => {
      console.log("docRef>>>", docRef);
      resetForm(initialValues);
    })
    .catch(error => {
      console.error("Error adding document: ", error);
    });
  }

  render() {
    const { options } = this.state;
    return (
      <Container>
        <Formik
          initialValues={initialValues}
          validationSchema={Yup.object().shape({
              fieldOfResearch: Yup.array().required("What is your field of research?"),
          })}
          onSubmit={this.handleSubmit}
          render={({
            errors,
            status,
            touched,
            setFieldValue,
            setFieldTouched,
            handleSubmit,
            isSubmitting,
            dirty,
            values
          }) => {
            return (
              <div>
                <Form>
                  <div className="form-group">
                    <label htmlFor="fieldOfResearch">
                      Select your field(s) of research
                    </label>
                    <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 => {
                        setFieldValue("fieldOfResearch", selectedOptions)}
                      }
                      onBlur={setFieldTouched}
                      options={options}
                    />
                    {errors.fieldOfResearch && touched.fieldOfResearch &&
                      <ErrorMessage
                         name="fieldOfResearch"
                         component="div"
                         className="invalid-feedback d-block"
                      />
                    }
                  </div>
                  <div className="form-group">
                    <Button
                      variant="outline-primary"
                      type="submit"
                      id="ProjectId"
                      onClick={handleSubmit}
                      disabled={!dirty || isSubmitting}
                    >
                      Save
                    </Button>
                  </div>
                </Form>
              </div>
            );
          }}
        />
      </Container>
    );
  }
}

export default App;

只需尝试首先复制粘贴此内容，然后再尝试进行更改。我想这应该对您有帮助！

更新后的答案：

嗨，梅尔，我只是将整个系统设置在系统中，并尝试为您完成此操作，尽管我无法与您分享信誉，但我想这应该有所帮助。

Javascript不同步。您的componentDidMount不会等待您尝试从Firebase获取的数据。它将只是在查询返回响应之前设置状态。
他们的关键是等待响应。我已经以这种方式编辑了代码，并且可以在控制台上的render（）中看到这些选项。

import React from 'react';
import firebase from "./firebase.js";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: []
    }
  }

  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
        });
      });
    });
    this.setState({
      options
    });
  }

  render() {
    console.log(this.state);
    const { options } = this.state;
    return (
      <div className="form-group">
        <label htmlFor="fieldOfResearch">
          Select your field(s) of research
        </label>

        <Select
          key={`my_unique_select_key__${fieldOfResearch}`}
          name="fieldOfResearch"
          isMulti
          className={
            "react-select-container" +
            (errors.fieldOfResearch && touched.fieldOfResearch
              ? " is-invalid"
              : "")
          }
          classNamePrefix="react-select"
          value={this.state.selectedValue1}
          onChange={e => {
            handleChange1(e);
            this.handleSelectChange1(e);
          }}
          onBlur={setFieldTouched}
          options={options}
        />
      </div>
    );
  }
}

export default App;

让我知道这是否适合您！

我不禁注意到，为什么handleSubmit中有这么多setState？您迫使组件重新渲染多次。相反，您可以执行以下操作：

handleSubmit = (formState, { resetForm }) => {
    // Now, you're getting form state here!
    console.log("SUCCESS!! :-)\n\n", formState);
    fsDB
      .collection("project")
      .add(formState)
      .then(docRef => {
        console.log("docRef>>>", docRef);
        this.setState({ selectedValue1: null, selectedValue2: null, selectedValue3: null, selectedValue4: null, selectedValue5: null, selectedValue6: null });
        resetForm(initialValues);
      })
      .catch(error => {
        console.error("Error adding document: ", error);
      });
  };

Answer 2

那么这样会有所帮助吗？

function SomeComponentName(props) {
  const [options, setOptions] = React.useState([]);

  React.useEffect(() => {
    getOptions()
  }, []}

  async function getOptions() {
    const tmpArr = [];

    try {
      // Perform get() request and loop through all docs
      await fsDB
        .collection("abs_codes")
        .get()
        .then(snapshot => {
          snapshot.forEach(doc => {
            const { title } = doc.data();
            const label = `${title} - ABS ${doc.key}`;

            tmpArr.push({ value: title, label });
          });
          setOptions(tmpArr);
        });
    } catch (err) {
      console.log("Error getting documents", err);
    }
  }

  return (
    <div className="form-group">
      <label>
        <Select
          // ...
          options={options}
          // ...
        />
      </label>
    </div>
  );
}

这将获取“ abs_code”集合中的所有文档，循环浏览它们，并将每个条目作为对象推送到“ options”数组。

Answer 3

要使您的React组件从Firestore中检索到研究领域后进行更新，您需要声明options，以便React会注意其价值变化。您可以通过在类状态内保存选项并稍后使用setState()对其进行更新来实现此目的：

// At the top of the class,
state = {
  options: [],
  // Any other state properties,
};

然后，在componentDidMount()函数中，调用Firestore集合，并使用以下结果填充state.options：

fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
    let newOptions = [];
    querySnapshot.forEach(function (doc) {
        console.log(doc.id, ' => ', doc.data());
        newOptions.push({
          value: doc.data().title.replace(/( )/g, ''),
          label: doc.data().title + ' - ABS ' + doc.id
        });
    });
    setState({options: newOptions});
});

这应该从Firestore中检索您的“ abs_for_codes”文档，并将其分配给组件的options属性，以允许您的Select元素填充新数据。

使用Firebase集合中的键值对填充react select选项数组

3 个答案: