使用map生成数组值时，如何为redux-form字段设置初始值

针对你遇到的场景，核心是让redux-form识别动态生成的数组字段，并对应上正确的初始值，我给你梳理一下具体的实现步骤和代码示例：

1. 理解redux-form对数组类型字段的处理逻辑 #

redux-form的initialValues支持数组结构，你只需要把longHours初始值设置为一个和你tem数组长度匹配的数组，然后在动态渲染字段时，给每个字段设置带索引的name属性（比如longHours[0]、longHours[1]），redux-form就会自动把初始值绑定到对应位置的字段上。

2. 具体实现步骤 #

方式一：静态配置初始值（适合初始值固定的场景）

如果你的longHours初始值是固定的，可以直接在reduxForm高阶组件的配置里定义：

import { reduxForm, Field } from 'redux-form';

class YourProjectForm extends React.Component {
  state = {
    tem: [/* 你的数组数据 */]
  }

  render() {
    const { handleSubmit } = this.props;
    const peoples = [/* 你的下拉选项数据 */];

    return (
      <form onSubmit={handleSubmit}>
        {this.state.tem.map((item, index) => (
          <div key={index} className="d-flex justify-content-start humanOnProject align-items-center">
            <img src={item.img} className="humanLogo" />
            {/* 人员选择下拉框（建议也用Field包裹，统一由redux-form管理） */}
            <div className="reSelect">
              <Field
                name={`selectedPeople[${index}]`}
                component={({ input }) => (
                  <Select
                    {...input}
                    options={peoples}
                    clearable={false}
                  />
                )}
              />
            </div>
            {/* longHours字段：用Field包裹，name设置为带索引的数组形式 */}
            <Field
              name={`longHours[${index}]`}
              component="input"
              type="number"
              placeholder="填写时长"
            />
          </div>
        ))}
        <button type="submit">提交表单</button>
      </form>
    );
  }
}

// 配置redux-form，设置initialValues
export default reduxForm({
  form: 'projectForm',
  initialValues: {
    // 这里的数组长度要和你state.tem的长度一致
    longHours: [8, 7.5, 6],
    selectedPeople: [] // 如果需要给人员选择框也设初始值，同样用数组
  }
})(YourProjectForm);

方式二：动态设置初始值（适合根据state/props动态生成的场景）

如果你的tem数组是异步获取的，或者初始值需要根据tem的内容动态生成，可以在组件挂载时调用redux-form提供的initialize方法：

componentDidMount() {
  // 根据tem数组的长度，生成每个longHours的默认值（比如默认8小时）
  const defaultLongHours = this.state.tem.map(() => 8);
  // 调用initialize方法设置表单初始值
  this.props.initialize({
    longHours: defaultLongHours
  });
}

3. 关键注意点 #

• 动态字段的name必须是数组名[索引]的格式，比如longHours[${index}]，这样redux-form才能正确关联数组中的对应元素。
• 如果使用自定义组件（比如你用的Select）作为Field的component，记得把redux-form传递的input对象解构传递给组件，这样才能实现状态同步。

内容的提问来源于stack exchange，提问作者Dima Cadabrovec