表单的空白字段，未考虑“initialValues”

Question

我正在使用最新的 redux-form (v6)。我正在尝试使用状态中的值初始化表单，所以根据文档，我这样做了：

myForm = reduxForm({
    form: 'xxx'
})(myForm);

myForm = connect(state => ({
    initialValues: {
      ...state.taskForm.taskData.parameters
    }
  })
)(myForm);

然后，我在myForm的render()方法中小心地添加了我的Field组件，我使用了我自定义的InputField无状态组件：

export const InputField = ({propName, label}) => (
   <Field name={propName}
          component={ (prop) => <FormGroup>
              <Col xs={4} componentClass={ControlLabel}>{label}</Col>
              <Col xs={8}>
                <FormControl {...prop} />
              </Col>
            </FormGroup>
          }
    />
);

（我使用 react-bootstrap 作为 UI）

当然，我从 initialValues.

中对 Field 的 name 进行了三次检查是正确的

但是，表单显示为空白字段而不是初始值。

我可以通过调试器看到 INITIALIZE 操作 .payload 包含具有正确初始值的字段。

我认为问题如下：INITIALIZE 动作被分派 before REGISTER_FIELD。或者至少，一旦 REGISTER_FIELD 被调度，它不会采用初始值，尽管字段名称设置正确......但我不知道该怎么做解决这个问题。和也许是因为别的原因...

因为我很绝望，所以我尝试了 reinitializeState: true 但它没有改变任何东西。

编辑： 看来我实际上正面临这个问题 #1750, and the solution seems to be #2210

Answer 1

Field 将分为 input 和 meta 对象的属性传递给它的组件，您应该只将 input 属性传递给 FormControl 组件。所以使用这个：

<FormControl {...prop.input} />

而不是这个：

<FormControl {...prop} />

请查看 redux-form docs 了解更多详情。

表单的空白字段，未考虑“initialValues”

Blank fields for form, `initialValues` not taken into account

reactjs

react-bootstrap

redux

redux-form