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

Question

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

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

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 选择字段。

然后我有:

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

  };

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

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

SelectedValue1 是我用于 fieldOfResearch 的值，SelectedValue2 是用于 discoveryStatus 的值。

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 选择？

我见过this question答案解释了如何将 Formik 与 React-Select 结合使用，但我无法理解它，也无法了解它如何与我正在使用的表单结构集成。

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

Answer 1

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

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

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