Redux Form无法更新：表单无法随按键重新渲染问题求助

我之前也碰到过完全一样的困扰——Redux Form的组件死活不跟着输入更新，连表单函数都不执行第二次，按钮一直灰着。结合你说的情况，大概率是这几个关键地方没处理对，咱们一步步排查：

1. 确认reduxForm高阶组件的配置是否正确 #

首先得确保你用reduxForm()包裹组件时，配置了必要的参数，尤其是enableReinitialize：

export default reduxForm({
  form: 'GetStartedForm', // 唯一的表单名，不能重复
  enableReinitialize: true // 关键！如果初始值可能变化，必须开这个，否则组件不会重新渲染
})(GetStartedForm);

如果你的表单初始值来自Redux store，但没开enableReinitialize，当初始值变化时组件不会触发重渲染，自然也不会响应输入变化。

2. 别用非受控组件！Field必须是受控的 #

你提到用非受控方式能显示输入，但表单函数不执行——这正好戳中问题：Redux Form的核心是通过受控组件跟踪表单状态，如果你自己绕开了input props的value和onChange，Redux Form根本没法感知到输入变化，也就不会触发组件重渲染，按钮的禁用状态自然也不会更新。

正确的Field组件写法应该是这样的：

const InputField = ({ input, label, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    {/* 必须用input里的value和onChange，这是受控的核心 */}
    <input {...input} type="text" />
    {touched && error && <span>{error}</span>}
  </div>
);

// 在GetStartedForm里使用
<Field name="username" component={InputField} label="用户名" />

这里的input props是Redux Form自动传入的，包含了value、onChange等关键属性，必须绑定到输入组件上，这样Redux Form才能实时跟踪状态变化，触发组件重渲染。

3. 检查组件的Redux连接是否正确 #

如果你同时用了connect和reduxForm，要注意顺序：必须先包裹reduxForm，再包裹connect，否则Redux Form的状态不会被正确注入到组件props里：

// 正确顺序：先reduxForm，再connect
const ConnectedForm = connect(
  state => ({
    initialValues: state.user.formInitialValues // 如果需要从store取初始值
  })
)(reduxForm({ form: 'GetStartedForm', enableReinitialize: true })(GetStartedForm));

export default ConnectedForm;

另外，如果你的connect用了pure: true（默认就是true），要确保映射的props确实会变化——如果浅比较发现props没变化，组件也不会重渲染。

4. 确认表单验证和按钮禁用逻辑 #

按钮一直禁用，大概率是因为Redux Form的invalid状态没更新。你可以在组件里打印props.invalid看看：

const GetStartedForm = (props) => {
  const { handleSubmit, invalid } = props;
  console.log('表单状态：', invalid); // 看看输入时这个值有没有变化
  return (
    <form onSubmit={handleSubmit}>
      {/* Field组件 */}
      <button type="submit" disabled={invalid}>提交</button>
    </form>
  );
};

如果invalid一直是true，那可能是验证规则有问题——比如必填项的验证没正确触发，因为输入没被Redux Form跟踪到（回到前面的受控组件问题）。

最后再排查一个小细节：组件是否被意外缓存了 #

有时候如果用了React.memo或者其他缓存组件的方式，会导致组件不重渲染。如果你的GetStartedForm被包裹了React.memo，要确保正确设置了比较函数，或者暂时去掉缓存看看是否恢复正常。

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