как установить начальные значения в массив полей formik? - PullRequest
Новая
       0

как установить начальные значения в массив полей formik?

0 голосов
/ 12 марта 2020

Я пытаюсь установить некоторые значения для formik начальных значений prop. Это было бы проще, если бы моя форма не использовала <FieldArray /> в formik.

У меня есть два компонента, мой родительский компонент, который имеет все функции-обработчики моей формы, а затем есть мой дочерний компонент, где используется formik. Мне нужно установить начальные значения формы формы при инициализации. Ниже приведен код раскрывающегося списка, в котором я использую метод pu sh. 

             <Formik
                enableReinitialize={defaultLocation.length > 0}
                initialValues={{
                  smartCabinetRequestArray: []
                }}
              render={props => {
               return (
                  <Form onSubmit={props.handleSubmit}>
                    <div className="form-body">
                      <FieldArray
                       name="smartCabinetRequestArray"
                       render={({ remove, push }) => (
                           <CustomMultiSelect
                            name="document_type_id"
                            id="document_type_id"
                            options={options}
                            onChange={(name, value) => {
                                if (value !== null) {
                                  if (value.length > selectedDocumentTypes.length) {
                                    push({
                                      type: "",
                                      document_type_id: "",
                                      document_type_apply_period_id: "",
                                      categories: [],
                                      location: defaultLocation,
                                      license: defaultLicense
                                    });
                                  } 
                                }
                            props.setFieldValue(name, value);
                           }}
                           value={selectedDocumentTypes}
                           isDisabled={isDocDropDownDisabled}
                         />
                     )
                    </div>
                  </Form>
                );
            }}

Во время выполнения описанного выше обработчика onChange I pu sh вышеуказанный объект использует FeildArray pu sh. метод. Внутри метода pu sh есть два атрибута location и license, и я присвоил им defaultLocation, defaultLicense соответственно.

Внутри поля Array у меня есть еще два множественных выбора из выпадающих списков реагирования выберите npm пакет. Если длина переменных массива defaultLocation и defaultLicense превышает 0, я устанавливаю их в качестве значений по умолчанию для выбранных компонентов. 

<CustomMultiSelect
 name={`smartCabinetRequestArray[${index}].location`}
 id={`smartCabinetRequestArray[${index}].location`}
 options={locationOptions}
 onChange={(name, value) => props.setFieldValue( name, value)}
 onBlur={props.setFieldTouched}
 defaultValue={ defaultLocation.length > 0 && defaultLocation }
/>

<CustomMultiSelect
 name={`smartCabinetRequestArray[${index}].license`}
 id={`smartCabinetRequestArray[${index}].license`}
 options={licenseOptions}
 onChange={(name, value) => props.setFieldValue( name, value)}
 onBlur={props.setFieldTouched}
 defaultValue={ defaultLicense.length > 0 && defaultLicense }
/>

Проблема заключается в том, что, хотя компонент выбора реактива устанавливает значение по умолчанию, formik не распознает выбранное значение. Formik распознает предварительно выбранное значение, только если запущен обработчик onChange.

В первом блоке кода я использовал метод FieldArray pu sh для инициализации атрибутов местоположения и лицензии с помощью переменных defaultLocation и defaultLicense. defaultLocation и defaultLicense это состояния, которые я храню в родительском компоненте, которые передаются дочернему компоненту (в форму с formik). Я понимаю, что я должен установить предварительно выбранные значения в начальные значения formik, но я не уверен, что я использую правильный подход.

...