redux-form:<FieldArray> + <FormSection>用于复杂的对象数组

Question

我正在redux-form尝试创建一个导致对象数组的表单,例如:

const formData = {
  //...
  rules: [
    {
      level: 1,
      source: 'some source',
      //...
    }, {
      level: 3,
      source: 'another source'
      //...
    }
  ]
}

看起来我应该能够FormSection使用FieldArray组件来下一个多个...但我无法使它工作.这是我目前的尝试:

const renderRules = ({ fields, meta: { error } }) => (
  <div>
    <Button
      text="Add Rule"
      onClick={e => {
        e.preventDefault()
        fields.push()
      }}
    />
    {fields.map((rule, index) => (
      <FormSection name="rule"} key={index}>
        <legend>Rule {index + 1}</legend>
        <Field name="level" component={Select} label="Level">
            <Option value={1}>Level 1</Option>
            <Option value={2}>Level 2</Option>
            <Option value={3}>Level 3</Option>
        </Field>
        <Field name="source" component={Input} label="Source" />
      </FormSection>
    ))}
  </div>
)

但这不起作用:(因为所有的值都放在rule键下,而不是作为rules数组中的一个对象.有没有人以前做过这个？我能找到的所有例子FieldArray只使用一个Field元素,但它必须是可能的做一些更复杂的事情.以前有人这样做了吗？任何帮助都表示赞赏!谢谢.

Answer 1

想出来并为任何遇到此问题的人发帖.在分配数组中每个字段的名称时,不要使用FormSection&使用rule参数,如下所示:

const renderRules = ({ fields, meta: { error } }) => (
  <div>
    <Button
      text="Add Rule"
      onClick={e => {
        e.preventDefault()
        fields.push()
      }}
    />
    {fields.map((rule, index) => (
      <legend>Rule {index + 1}</legend>
      <Field name={`${rule}.level`} component={Select} label="Level">
          <Option value={1}>Level 1</Option>
          <Option value={2}>Level 2</Option>
          <Option value={3}>Level 3</Option>
      </Field>
      <Field name={`${rule}.source`} component={Input} label="Source" />
    ))}
  </div>
)

这给出了Field一个名称rule[0].limit或者rule[0].source&正确地嵌套了数组中的对象.