如何使用redux-form从状态初始化FieldArray？

Question

我使用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>
      );
    }

通过从ComponentWillMount上的api中获取食品数据，可以正确填充所有其他字段。只需要该FieldArray信息和标记。

非常感谢帮助！

Answer 1

您传递给initialValues（或通过调度的initialize()动作）的值必须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
  }
]

我已经在这里为您快速编写了一个简单的示例，因此您可以看到它的工作原理：InitializeFromStateForm.js