redux-form触发change action后输入框值未更新问题咨询

我碰到过好几个类似的情况，尤其是在 React 16.3 搭配 Redux Form 的时候——既然你已经严格跟着官方文档实现了，那咱们一步步排查最可能踩的坑：

1. 优先检查版本兼容性 #

React 16.3 引入了新的 Context API，而 Redux Form v7.4.2 及以后的版本才完全适配这个特性。如果你的 redux-form 版本低于这个号，大概率会出现「Action 触发了但组件不更新」的脱节问题。打开你的 package.json 确认版本，要是版本过低，直接升级到兼容的最新版试试。

2. 确认 Redux Store 配置是否正确 #

这是最容易忽略的点：必须把 Redux Form 的 reducer 以 form 为固定 key 合并到根 reducer 里，否则 Redux Form 无法正确读写表单状态。示例代码如下：

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

const rootReducer = combineReducers({
  // 你的其他业务 reducer
  form: formReducer // 这个 key 绝对不能改！
});

要是你写错了 key 或者忘了添加这个 reducer，哪怕 Action 日志能看到，Redux 里也存不下表单状态，输入框自然不会更新。

3. 检查 Field 组件的使用是否规范 #

官方示例里用的是 Field 组件来关联输入框和 Redux 状态，如果你自己手动写了 input 标签但没正确绑定 props，也会出问题：

• 正确的基础用法：

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

const SimpleForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit}>
    <div>
      <label>Username</label>
      <Field name="username" component="input" type="text" />
    </div>
    <button type="submit">Submit</button>
  </form>
);

export default reduxForm({
  form: 'uniqueSimpleForm' // 这个表单名要唯一
})(SimpleForm);

• 要是用自定义组件作为 component，必须把 input 对象的 value 和 onChange 传递给实际输入元素：

const CustomInput = ({ input, label }) => (
  <div>
    <label>{label}</label>
    <input {...input} type="text" /> {/* 必须展开 input props */}
  </div>
);

// 调用时
<Field name="username" component={CustomInput} label="Username" />

漏传 input props 的话，输入框就和 Redux Form 的状态彻底断开了。

4. 排查 StrictMode 的影响 #

React 16.3 新增的 <StrictMode> 会触发组件两次渲染，部分旧版 Redux Form 在这种场景下会出现状态不同步。如果你把根组件包裹在了 StrictMode 里，可以暂时去掉试试，看是否能解决问题。

5. 确认没有局部状态覆盖 #

有没有在组件里用 useState 或者类组件的 this.state 手动维护输入框的值？如果有，Redux Form 的全局状态会被局部状态覆盖，导致输入框显示的是局部状态的值，而非 Redux 里的更新后的值。

6. 检查高阶组件的包裹顺序 #

如果你的组件同时用了 connect 和 reduxForm，必须先包裹 reduxForm，再包裹 connect，否则组件无法正确订阅表单状态的变化：

// 正确顺序
export default connect(mapStateToProps)(reduxForm({ form: 'simpleForm' })(SimpleForm));

// 错误顺序（会导致状态订阅失效）
export default reduxForm({ form: 'simpleForm' })(connect(mapStateToProps)(SimpleForm));

最后再去 Redux DevTools 里确认下：form 节点下对应的表单字段值是不是真的更新了？如果 store 里的值变了但输入框没反应，那基本就是组件订阅状态的环节出了问题，回到上面的步骤再排查一遍。

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