React, Formik, React-select & Firebase - массив isMulti в форме Formik - PullRequest
3 голосов
/ 05 мая 2019

Я пытаюсь использовать React, Formik, Reaction-Select и Firebase (облачное хранилище), чтобы создать форму в реагировании.

Все работает нормально, когда я использую ответ по выбору только один раз. Существует только одно состояние для обновления. Когда я пытаюсь использовать более одного раскрывающегося списка, я получаю сообщение об ошибке:

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

Я не знаю, что означает это сообщение об ошибке. Я использовал несколько наставников и разработчиков кода из upwork / codementor и т. Д. - и теперь этот код является рухнувшим и недоступным для отслеживания документами Formik - однако он работает, когда я один раз использую реагировать на выбор. Я думаю, что проблема может быть связана с тем, как я называю поля, чтобы различать обновления состояния.

У меня есть:

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 - для раскрытия Status.

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

Кто-нибудь знает, как обрабатывать несколько полей, в которых есть состояние, с помощьюact-select, formik, firebase и Reaction?

Я разобрал всю эту форму и начал снова. Я думаю, что часть проблемы может иметь какое-то отношение к параметру response-select isMulti, который позволяет полю иметь несколько значений.

Из документов «отреагировать» я думаю, что он должен использоваться на поле следующим образом:

                      isMulti={true}

Когда я пытаюсь это сделать, форма отображается локально и позволяет выбрать несколько значений, но сохраняет их как неопределенные. Ошибка, скопированная выше, сбрасывается при попытке публикации в базе данных.

Итак, кто-нибудь знает, как использовать response-select с несколькими входными значениями в меню выбора?

Я видел этот вопрос и ответ, объясняющий, как использовать Formik с реагированием-выбором, но я не могу ничего понять или понять, как его можно интегрировать со структурой формы, которая Я использую.

Я также видел эту песочницу кода , которая показывает, как это можно сделать на языке, отличном от jsx. Я не могу понять, как включить этот подход в мою структуру формы.

1 Ответ

0 голосов
/ 28 мая 2019

Вот коды и ящик, который, я считаю, решает ваши проблемы. Он не включает метод add to firestore в функцию handleSubmit.

Я сделал одно поле множественным, а другое - простым.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...