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

【问题标题】：How to initialize a FieldArray from state using redux-form?如何使用 redux-form 从状态初始化 FieldArray？
【发布时间】：2016-10-31 19:15:04
【问题描述】：

我正在使用 redux-form 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 信息和标记。

非常感谢您的帮助！

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

您传递给initialValues（或通过分派的initialize() action）的值必须与您从头开始创建数组时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

【讨论】：