javascript - 很少有字段没有使用 redux 表单中的初始值进行更新

Question

嗨，我在我的应用程序中使用了 Redux 表单，在编辑表单时，它只为前四个字段取初始值，而对于其余字段，它不取初始值，也不更新输入字段。请帮我。

fieldDetailForm初始值对象 - 该对象在包含 redux 形式的 react 组件中作为 props 传递。

initialValues = {
 description: "Protect Lines Group",
 fieldDisplayName: "Protect Lines Group",
 fieldIdName: "ProtectLinesGroups",
 type: "MultiList",
 values: [
  { listValue: "2814", listDisplay: "Cover Lines" },
  { listValue: "2814", listDisplay: "Cover Lines" }
 ],
}

包含 redux 表单的 React 组件

render() {
  console.log(this.props.initialValues);   // getting entire initialValues object
  return(
    <form className="top-buffer clear-fix" onSubmit={handleSubmit(this._submit.bind(this))}>
              <div className="row top-buffer">
                <div className="form-group col-md-4 col-sm-12">
                  <label className="form-group-label label-font">Field ID</label>
                  <div className="input-group">
                    <Field
                      classNameStyle="form-control"
                      name="fieldIdName"
                      component={InputTextField}
                      type="text"
                      label="Enter a unique ID for Field"
                      defaultMessage="Unique Name with no spaces"
                      defaultMessageClass="form-text small"
                    />
                  </div>
                </div>
                <div className="form-group col-md-4 offset-md-2 col-sm-12 sm-mt-10">
                  <label className="form-group-label label-font">
                    Display Name
                  </label>
                  <div className="input-group">
                    <Field
                      classNameStyle="form-control"
                      name="fieldDisplayName"
                      component={InputTextField}
                      type="text"
                      label="Field Display Name"
                      defaultMessage="Short and descriptive name works best"
                      defaultMessageClass="form-text small"
                    />
                  </div>
                </div>
              </div>
              <div className="row top-buffer">
                <div className="form-group col-md-4 col-sm-12">
                  <label className="form-group-label label-font">
                    Description
                  </label>
                  <div className="input-group">
                    <Field
                      classNameStyle="form-control"
                      rows="3"
                      cols="20"
                      name="description"
                      component={InputTextAreaField}
                      type="text"
                      label="Describe Field use for developer (optional)"
                      defaultMessage="Briefly explain the purpose of field"
                      defaultMessageClass="form-text small"
                    />
                  </div>
                </div>
                <div className="form-group col-md-4 offset-md-2 col-sm-12 sm-mt-10">
                  <label className="form-group-label label-font">
                    Field Type
                  </label>
                  <div className="input-group">
                    <Field
                      classNameStyle="form-control"
                      name="type"
                      component={SelectField}
                      placeholder="Select a type"
                      options={selectOptions}
                      getFieldList={this.getFieldList}
                    />
                  </div>
                  <span className="form-text small">Data type for field</span>
                </div>
              </div>
              {showListFields && (
                <div className="top-buffer">
                  <h5>
                    List Options
                  </h5>
                  {/* {action === 'add' && ( */}
                    <div>
                      <FieldArray
                        name="values"
                        disabledButton={disabledButton}
                        component={MultiInputTextField}
                        deleteListOptions={this.deleteListOptions}
                      />
                    </div>
                  {/* )} */}
                  {action === 'edit' && (
                    <EditFieldListOptionTable
                      fieldListOptions={initialValues.values} />
                  )}
                </div>
              )}
          </form>
  );
}

const formWrapped = reduxForm({
  form: 'FieldDetailForm',
  enableReinitialize: true,
  overwriteOnInitialValuesChange: true,
  forceUnregisterOnUnmount: true,
  validate: validateFields
})(FieldDetailForm);

export default connect(null)(formWrapped);

标签： javascriptreactjsreact-reduxredux-form