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

Question

我正在使用 redux 形式的 FieldArray 来允许用户在不同的日子为他们的商店创建营业时间块。

可以很好地添加它们，但一旦创建，需要在其 'Edit Store Open Times' 部分加载一个表单，其中包含最初创建的数据，以便稍后进行更改。

不知道如何遍历返回的信息。以下工作可以创建，但我需要解决方案来将服务块引入并打印到字段集中，以便用户可以编辑和重新提交。

    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() 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

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

How to initialize a FieldArray from state using redux-form?

reactjs

redux

redux-form