Я пытаюсь использовать 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. Я не могу понять, как включить этот подход в мою структуру формы.