React、Formik、React-select 和 Firebase - Formik 形式的 isMulti 数组答案

【问题标题】：React, Formik, React-select & Firebase - isMulti array in a Formik formReact、Formik、React-select 和 Firebase - Formik 形式的 isMulti 数组
【发布时间】：2019-09-23 03:47:45
【问题描述】：

我正在尝试使用 React、Formik、react-select 和 Firebase (cloud firestore) 在 react 中构建表单。

当我只使用一次 react-select 时，一切正常。只有一种状态需要更新。当我尝试使用多个下拉菜单时，我收到一条错误消息：

Unhandled Rejection (FirebaseError): Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field fieldOfResearch)

我不知道这个错误信息是什么意思。我雇用了来自 upwork/codementor 等的多个代码导师和开发人员 - 现在代码是一团糟，无法追溯到 Formik 文档 - 但是，当我使用一次 react-select 时它可以工作。我认为问题可能与我如何命名字段以区分状态更新有关。

我有：

const initialValues = {
  fieldOfResearch: null,
  disclosureStatus: null,
}

这两个都是我表单中的 react-select 字段。

那么我有：

class ProjectForm extends React.Component {
  state = {
    selectedValue1: null,
    selectedValue2: null,

  };

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

  handleSelectChange2 = selectedValue2 => {
    this.setState({ selectedValue2 });
  };

SelectedValue1 用于 fieldOfResearch，SelectedValue2 用于公开状态。

handleSubmit = (formState, { resetForm }) => {
    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 });

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

然后在我的渲染方法中，我有：

render() {
    return (
      <Formik
        initialValues={initialValues}


onSubmit={this.handleSubmit}
        render={({ errors, status, touched, setFieldTouched, handleSubmit, values }) => {
          let fieldOfResearch;
          const handleChange1 = optionsObject => {
            fieldOfResearch = optionsObject;
            return (values.fieldOfResearch = optionsObject.value);
          };
          let disclosureStatus;
          const handleChange2 = confidentialityObject => {
            disclosureStatus = confidentialityObject;
            return (values.disclosureStatus = confidentialityObject.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={true}
                                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>

我尝试使用 Yup 进行验证，如下所示：

fieldOfResearch: Yup.array().required("What is your field of research?"),

从错误信息的文字来看，我认为它不喜欢的部分是句柄提交方法：

this.setState({ selectedValue1: null });

有谁知道如何使用 react-select、formik、firebase 和 react 处理多个具有状态的字段？

我把整个表格拆开，然后重新开始。我认为部分问题可能与 react-select isMulti 选项有关 - 它允许字段具有多个值。

从react-select的文档来看，我认为应该在字段上使用如下：

                      isMulti={true}

当我尝试这样做时，表单会在本地呈现并允许选择多个值，但会将它们全部保存为未定义。上面复制的错误在尝试发布到数据库时抛出。

那么 - 有人知道如何在选择菜单上使用带有多个输入值的 react-select 吗？

我已经看到this question 和解释如何将 Formik 与 react-select 一起使用的答案，但我无法理解它，或者看到它如何与我正在使用的表单结构集成。

我还看到了this Code Sandbox，它展示了一种可以用 jsx 以外的语言完成的方法。我不知道如何将这种方法整合到我的表单结构中。

【问题讨论】：

你能分享一个代码沙箱链接吗？此外，如果您在状态中存储值，我看不出使用 Formik 的任何真正优势。
@DaniVijay 关于在状态中存储值是什么意思。还有什么其他选择？
您似乎在使用formState 提交值，因此您已经在使用Formik 的内部状态。为什么不使用values.fieldOfResearch 在字段中设置值（而不是value={this.state.selectedValue1}）。我错过了什么吗？
我不知道 React-Select 和 Formik，但是...在您的 handleSubmit 函数中，您正在接受来自表单的 formState 对象并尝试将其添加到您的Firestore 集合。根据 Firestore 错误，formState 包含一个设置为undefined 的“fieldOfResearch”属性。 Firestore 将接受 null 值，但不接受 undefined。我猜你的 onChange 处理程序中有一些东西破坏了 fieldOfResearch 值。

标签： reactjs firebase google-cloud-firestore react-select formik

【解决方案1】：

这是一个我相信可以解决您的问题的代码框。它不包含 handleSubmit 函数中的 add to firestore 方法。

我将一个字段设为多选，将另一个字段设为普通选择作为示例。

https://codesandbox.io/s/formik-and-reactselect-example-i67l6

【讨论】：