Question

我正在尝试为Formik初始值prop设置一些值。如果我的表单未在formik中使用<FieldArray />，这会更容易。

我有两个组件，我的父组件具有表单的所有处理程序功能，然后是我的子组件，其中使用了formik。我需要在初始化时设置formik表单的初始值。下面是我使用push方法的下拉列表的代码。

             <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处理程序期间，我使用FeildArray的push方法推送了上述对象。在push方法中，有两个属性location和license，我分别给它们分配了defaultLocation和defaultLicense。

在字段Array中，我有来自react select npm包的另外两个multi select下拉列表。如果数组变量的长度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 }
/>

问题在于，即使react select组件设置了默认值，formik也无法识别所选值。仅当触发onChange处理程序时，Formik才会识别预选值。

在第一个代码块中，我使用了FieldArray的push方法来使用defaultLocation和defaultLicense变量初始化位置和许可证属性。 defaultLocation和defaultLicense是我保存在父组件中的状态，这些状态被向下传递到子组件（使用formik传递给表单）。我知道我必须将预选值设置为formik初始值，但是我不确定我是否使用正确的方法。

如何为Formik字段数组设置初始值？

0 个答案: