如何以 redux 形式将初始值传递给 FieldArray 组件？

Question

我有一个对象数组，想将数据作为初始数据传递给 redux 表单的 FieldArray 组件。

我查看了 FieldArray 组件的文档，但不清楚提供初始值。

有没有办法做到这一点？

Answer 1

你必须将 fieldArray filed 作为数组传递，你可以通过两种方式实现：

1.pass reduxForm HOC 配置的 initialValues 道具

const Form = reduxForm({
  form: 'simple' // a unique identifier for this form
  initialValues: {field1: "val1", fieldArrayFieldName: ["val1", "val2"]}
})(SimpleForm)

const SimpleForm = (props) => (
  ...
  <FieldArray name="fieldArrayFieldName" component={renderFieldArrayComp} />
  ...
)

const renderFieldArrayComp = ({ fields }) => (  
        {fields.map((field, index) => (
          <li key={index}>
            <Field
              name={hobby}
              type="text"
              component={renderField}
              label={`Hobby #${index + 1}`}
            />
          </li>
        ))}
      )

有关更多信息，请参阅 docs

2.similarly 你也可以手动调度 INITIALIZE 动作，

reduxForm HOC 将为您提供一个 initialize 动作作为道具，你可以在 componentDidMount 中使用它，

componentDidMount() => {
  const {initialize} = this.props;
  initialize({field1: "val1", fieldArrayFieldName: ["val1", "val2"]})
}

如何以 redux 形式将初始值传递给 FieldArray 组件？

How to pass initial values to the FieldArray component in redux form?

reactjs

redux

redux-form