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

所有其他字段都从API获取上ComponentWillMount茶水数据正确填充。只需要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