初始只有一个字段的字段数组

我尝试使用字段数组的概念,因为在我的应用程序中,用户应该能够为同一类字段填充多个值。我可以按照redux表单字段数组示例来做,但是,在一个示例中,没有初始字段,我们必须首先单击“添加成员”,然后只有字段可以填充值,但我首先需要一个字段,然后如果用户想添加更多字段,请添加更多字段。

我从redux表单示例中尝试过,但它根本不允许我输入值。这是演示

https://codesandbox.io/s/n47qr2pvzl

该字段值的格式应如下所示

general: {
 general_information: {
  members: [
   {
     name: ''
   },
   {
     name: ''
   }
]
}
} 

这是密码

const renderMembers = ({ fields, meta: { touched, error, submitFailed } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>
        Add Member
      </button>
      {(touched || 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}.name`}
          type="text"
          component={renderField}
          label="Name"
        />
      </li>
    ))}
  </ul>
);

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