Question

我正在尝试使用React，Formik，react-select和Firebase（云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,
}

这两个都是我表单中的反应选择字段。

那我有：

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以外的语言完成此操作的方法。我不知道如何将这种方法整合到我的表单结构中。

Answer 1

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

作为示例，我将一个字段选择为多选，将另一个字段选择为简单选择。

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

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

1 个答案: