如何将React-Redux组件props中的初始值传入redux-form？

我之前也碰到过完全一样的问题，结合Redux-Form的官方文档和实际踩坑经验，给你几个排查和解决的关键点：

1. 必须开启enableReinitialize配置 #

这是最容易被忽略的核心点！如果你的初始值是从组件props动态传入的，一定要在reduxForm高阶组件的配置里加上enableReinitialize: true，不然组件挂载后就不会再根据props的变化重新初始化表单值。示例代码：

const YourWrappedForm = reduxForm({
  form: 'userProfileForm', // 表单唯一标识，必填
  enableReinitialize: true, // 动态初始值必须开启的关键配置
})(YourFormComponent);

2. 确保mapStateToProps的映射准确 #

要把props里的初始值正确映射到initialValues，而且字段名必须和表单中renderField的name属性完全一致，大小写、拼写都不能出错。比如：

const mapStateToProps = (state, ownProps) => ({
  initialValues: {
    fullName: ownProps.userInfo.fullName, // 这个key要和renderField的name="fullName"严格对应
    phone: ownProps.userInfo.phone
  }
});

3. 检查renderField的参数接收与传递 #

你的renderField组件必须正确接收并传递Redux-Form提供的input对象，这个对象里包含了value、onChange等核心控制属性。如果漏了展开input，表单就无法获取到初始值。正确的renderField示例：

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div className="form-group">
    <label>{label}</label>
    <input 
      {...input} // 必须展开input，不然初始value不会被注入到表单元素
      type={type} 
      className="form-control"
    />
    {touched && error && <span className="text-danger">{error}</span>}
  </div>
);

4. 处理异步初始值的情况 #

如果你的初始值是通过API异步获取的（比如从后端拉取用户信息），要确保在数据加载完成后再渲染表单，或者依赖enableReinitialize让组件在props更新时自动重新初始化。可以加个简单的条件渲染：

// 父组件中
{ownProps.userInfo && <YourWrappedForm />}

5. 确认Redux Store的Reducer配置 #

最后检查一下你的Redux Store是否正确集成了Redux-Form的reducer，这是Redux-Form正常工作的基础：

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer, // 必须注册这个reducer，不然表单状态无法被Redux管理
  // 你的其他业务reducers...
});

按照上面的步骤逐一排查，应该就能解决初始值无法传入的问题了。

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