Javascript Redux表单字段数组初始化具有特定长度的字段数组

我希望我的表单组件从一个包含3个空字段的字段数组开始。有人能解释一下如何用这种方式初始化它吗

我将脱离文档中提供的示例：

在这里，我们可以看到，最初我们没有字段，只有在单击相关按钮时，我们才能通过调用

onClick={（）=>fields.push（{}}}

来添加它们

我想从三个字段开始，允许用户添加更多字段。调用fields.push-in组件didmount不起作用。如何初始化具有特定长度的fields对象

FieldArraysForm.js

import React from 'react'
import { Field, FieldArray, reduxForm } from 'redux-form'
import validate from './validate'

const renderField = ({ input, label, type, meta: { touched, error } }) =>
  <div>
    <label>
      {label}
    </label>
    <div>
      <input {...input} type={type} placeholder={label} />
      {touched &&
        error &&
        <span>
          {error}
        </span>}
    </div>
  </div>

const renderHobbies = ({ fields, meta: { error } }) =>
  <ul>
    <li>
      <button type="button" onClick={() => fields.push()}>
        Add Hobby
      </button>
    </li>
    {fields.map((hobby, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Hobby"
          onClick={() => fields.remove(index)}
        />
        <Field
          name={hobby}
          type="text"
          component={renderField}
          label={`Hobby #${index + 1}`}
        />
      </li>
    )}
    {error &&
      <li className="error">
        {error}
      </li>}
  </ul>

const renderMembers = ({ fields, meta: { error, submitFailed } }) =>
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>
        Add Member
      </button>
      {submitFailed &&
        error &&
        <span>
          {error}
        </span>}
    </li>
    {fields.map((member, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Member"
          onClick={() => fields.remove(index)}
        />
        <h4>
          Member #{index + 1}
        </h4>
        <Field
          name={`${member}.firstName`}
          type="text"
          component={renderField}
          label="First Name"
        />
        <Field
          name={`${member}.lastName`}
          type="text"
          component={renderField}
          label="Last Name"
        />
        <FieldArray name={`${member}.hobbies`} component={renderHobbies} />
      </li>
    )}
  </ul>

const FieldArraysForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="clubName"
        type="text"
        component={renderField}
        label="Club Name"
      />
      <FieldArray name="members" component={renderMembers} />
      <div>
        <button type="submit" disabled={submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'fieldArrays', // a unique identifier for this form
  validate
})(FieldArraysForm)

从“React”导入React
从“redux form”导入{Field，FieldArray，reduxForm}
从“./validate”导入验证
常量renderField=（{input，label，type，meta:{toucted，error}}）=>
{label}
{感动&&
错误&&
{错误}
}
常量renderHobbies=（{fields，meta:{error}}）=>


fields.push（）}>
增加爱好

{fields.map（（爱好，索引）=>

字段。删除（索引）}
/>

)}
{错误&&

{错误}
}

常量renderMembers=（{fields，meta:{error，submitFailed}}）=>


fields.push（{}}>
添加成员
{提交失败&&
错误&&
{错误}
}

{fields.map（（成员，索引）=>

字段。删除（索引）}
/>
成员#{index+1}

)}

const FieldArraysForm=props=>{
const{handleSubmit，pristite，reset，submiting}=props
返回(
提交
明确的价值观
)
}
导出默认reduxForm({
表单：“fieldArrays”，//此表单的唯一标识符
验证
})（现场表格）

感谢Redux表单团队：

基本上，它的工作方式是在连接和导出表单时将一个初始值数组传递给表单，如下所示：

export default reduxForm({
  form: "foo",
  initialValues: {
    rockSingers: ['Axl Rose', 'Brian Johnson']
  },
  onSubmit: values => {
    window.alert( "Submited: \n" + JSON.stringify( values, null, 2 ) );
  }
})( MyForm );