Reactjs 如何使用redux表单从状态初始化FieldArray？

我使用redux表单FieldArray允许用户在不同的日子为他们的商店创建开放时间块

可以很好地添加它们，但一旦创建，就需要在“编辑存储打开时间”部分加载一个表单，其中包含最初创建的数据，以便以后进行更改

无法确定如何循环返回的信息。下面的工作可以创建，但我需要解决方案将服务块拉入并打印到字段集中，以便用户可以编辑和重新提交

    renderGroups = ({ fields, meta: { touched, error } }) => {
      return (
        <div>
          {fields.map((service, index) =>
            <div className="service-type-group" key={index}>
              <h4>{this.stringifyServiceNumbers(index + 1)} Service</h4>
              <button
                type="button"
                className="remove-button"
                onClick={() => fields.remove(index)}>Remove
              </button>
              <div className="field-group third">
                <Field
                  name={`${service}.day`}
                  component={SelectField}
                  floatingLabelText="Day of week"
                  className="textfield">
                    <MenuItem value={1} primaryText="Monday" />
                    <MenuItem value={2} primaryText="Tuesday" />
                    <MenuItem value={3} primaryText="Wednesday" />
                    <MenuItem value={4} primaryText="Thursday" />
                    <MenuItem value={5} primaryText="Friday" />
                    <MenuItem value={6} primaryText="Saturday" />
                    <MenuItem value={0} primaryText="Sunday" />
                </Field>
                <Field
                  name={`${service}.fromTime`}
                  component={TimePicker}
                  defaultValue={null}
                  floatingLabelText="From"
                  className="textfield"
                />
                <Field
                  name={`${service}.untilTime`}
                  component={TimePicker}
                  defaultValue={null}
                  floatingLabelText="To"
                  className="textfield"
                />
              </div>
              <div className="field-group half">
                <Field
                  name={`${service}.service_type`}
                  component={SelectField}
                  floatingLabelText="Service type"
                  className="textfield">
                  <MenuItem value={0} primaryText="First-come first-served" />
                  <MenuItem value={1} primaryText="Appointment" />
                </Field>
              </div>
              <div className="field-group sentence-inline">
                <Field
                  name={`${service}.peoplePer`}
                  type="number"
                  component={TextField}
                  label="Number of people per timeslot"
                  className="textfield"
                />
                <p>people are allowed every</p>
                <Field
                  name={`${service}.timeslotDuration`}
                  component={SelectField}
                  className="textfield">
                  <MenuItem value={0} primaryText="5 minutes" />
                  <MenuItem value={1} primaryText="10 minutes" />
                  <MenuItem value={2} primaryText="15 minutes" />
                  <MenuItem value={3} primaryText="30 minutes" />
                  <MenuItem value={4} primaryText="60 minutes" />
                  <MenuItem value={5} primaryText="All day" />
                </Field>
                <p>.</p>
              </div>
            </div>
          )}
          <button
            type="button"
            className="action-button"
            onClick={() => fields.push({})}>Add Service
          </button>
          {touched && error && <span>{error}</span>}
        </div>
      );
    }

renderGroups=（{fields，meta:{toucted，error}}）=>{
返回(
{fields.map（（服务，索引）=>
{this.stringifyServiceNumber（索引+1）}服务
fields.remove（index）}>remove
每天都允许有人来


)}
fields.push（{}）}>添加服务
{触摸&&error&&{error}
);
}

通过从ComponentWillMount上的api获取餐具室数据，所有其他字段都正确填充。只需要FieldArray信息和标记

---

非常感谢您的帮助

传递给

initialValues

（或通过调度）的值需要与从头创建数组时

redux form

所提供的结构相同。所以，从你的代码来看，我会说：

[
  { 
    day: 1, 
    fromTime: '10:00', 
    untilTime: '11:00', 
    service_type: 1, 
    peoplePer: 3,
    timeslotDuration: 4
  }
  { 
    day: 2, 
    fromTime: '12:00', 
    untilTime: '13:00', 
    service_type: 0, 
    peoplePer: 2,
    timeslotDuration: 2
  }
]

我在这里为您快速编写了一个简单的示例，您可以看到它正在工作：