Javascript redux表单：<；FieldArray>+&书信电报；FormSection>；对于复杂的对象数组

我正在使用

redux form

尝试创建一个生成对象数组的表单，例如：

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

似乎我应该能够使用

字段数组
组件下一步创建多个
FormSection
s…但我无法使其工作。以下是我目前的尝试：

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>
)

constrenderrules=（{fields，meta:{error}}）=>(
{
e、 预防默认值（）
fields.push（）
}}
/>
{fields.map（（规则，索引）=>(
规则{index+1}
一级
二级
三级
))}
)

但这不起作用：（因为所有的值都放在
规则
键下，而不是作为
规则
数组中的对象。以前有人这样做过吗？我能找到的所有
字段数组
的示例都只使用一个
字段
元素，但必须可以做一些更复杂的事情。以前有人这样做过吗？请提供帮助。）很高兴！谢谢。
解决了这个问题&我为遇到这个问题的其他人发帖。在分配数组中每个字段的名称时，不要使用
FormSection
&使用
规则
参数，如下所示：

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>
)

constrenderrules=（{fields，meta:{error}}）=>(
{
e、 预防默认值（）
fields.push（）
}}
/>
{fields.map（（规则，索引）=>(
规则{index+1}
一级
二级
三级
))}
)

这为
字段
提供了
规则[0]的名称。限制
或
规则[0]。源
&将对象正确嵌套在数组中