React登录页Redux Form无法存储输入值，始终返回undefined

我之前也碰到过这个问题，大概率是Redux Form的配置或者组件使用步骤出了疏漏，咱们一步步来排查修复：

1. 先检查根Reducer的配置（reducer/index.js） #

Redux Form必须依赖内置的formReducer来存储表单状态，如果根Reducer里没正确合并它，字段值根本不会被保存，自然返回undefined。

正确的根Reducer写法应该是这样：

import { combineReducers } from 'redux';
// 导入redux-form的reducer，记得重命名避免冲突
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  // 这里放你的其他自定义reducer
  form: formReducer // 这一行必须有！redux-form的核心依赖
});

export default rootReducer;

2. 检查登录组件（signin.js）的写法 #

这部分最容易出细节错误，比如没给组件套reduxForm高阶组件、Field的name写错、提交逻辑没用到handleSubmit：

正确的组件示例： #

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

const SignInForm = ({ handleSubmit, pristine, submitting }) => {
  // 提交函数必须接收values参数，这就是表单的字段值
  const handleLogin = (values) => {
    console.log('邮箱:', values.email);
    console.log('密码:', values.password);
    // 这里写你的登录逻辑
  };

  // 自定义Field渲染组件，要把input props传递给原生输入框
  const renderInputField = ({ input, label, type, meta: { touched, error } }) => (
    <div className="form-group">
      <label>{label}</label>
      {/* 必须展开input，包含value、onChange等Redux Form绑定的属性 */}
      <input {...input} type={type} className="form-control" placeholder={label} />
      {/* 可选：显示校验错误提示 */}
      {touched && error && <span className="text-danger">{error}</span>}
    </div>
  );

  return (
    {/* 表单的onSubmit必须用handleSubmit包裹你的自定义提交函数 */}
    <form onSubmit={handleSubmit(handleLogin)}>
      {/* Field的name属性必须和你要获取的字段名完全一致（比如email、password） */}
      <Field 
        name="email" 
        type="email" 
        component={renderInputField} 
        label="邮箱" 
      />
      <Field 
        name="password" 
        type="password" 
        component={renderInputField} 
        label="密码" 
      />
      <button 
        type="submit" 
        disabled={pristine || submitting}
        className="btn btn-primary"
      >
        {submitting ? '登录中...' : '登录'}
      </button>
    </form>
  );
};

// 必须用reduxForm高阶组件包装你的表单组件，指定唯一的form名称
export default reduxForm({
  form: 'signInForm' // 这个名称可以自定义，但要确保全局唯一
})(SignInForm);

这里容易踩的坑： #

• 忘记用reduxForm包裹组件：没有这个高阶组件，组件无法连接到Redux Form的状态，拿不到字段值。
• Field的name拼写错误：比如写成Email而不是email，提交时values.email就会是undefined。
• 表单onSubmit直接写自定义函数：必须用handleSubmit(你的函数)，因为handleSubmit会负责收集表单值并传递给你的函数。
• 自定义Field组件没传递input props：如果原生输入框没绑定input.value和input.onChange，Redux Form就无法跟踪字段值变化。

3. 检查依赖版本兼容性（package.json） #

Redux Form对React、Redux、React-Redux的版本有要求，版本不兼容也可能导致奇怪的问题。比如：

• redux-form 8.x 要求 react-redux >=7.0.0，redux >=4.0.0，react >=16.8.0
• 如果是旧项目用redux-form 7.x，对应的react-redux版本要匹配

推荐的兼容依赖示例：

{
  "dependencies": {
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-redux": "^7.2.9",
    "redux": "^4.2.1",
    "redux-form": "^8.3.10"
  }
}

排查步骤总结 #

1. 先确认根Reducer里有没有正确添加form: formReducer
2. 检查表单组件是否被reduxForm包裹，且Field的name属性正确
3. 确认表单的onSubmit是handleSubmit(你的提交函数)，且提交函数接收values参数
4. 检查依赖版本是否兼容，必要时升级或降级到匹配的版本

按照这个流程排查，应该能解决字段值返回undefined的问题。

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