React+Redux登录提交报login is not defined错误排查

直接触发报错的核心问题 #

• 你在LoginPage组件的submitHandler里调用了login方法，但组件文件顶部没有从userActions文件中导入这个方法，当前组件作用域内不存在login变量，直接触发引用错误。
• 修复方式：在LoginPage文件的导入区域补充对应导入语句，注意根据你实际的文件目录调整相对路径：

// 加在现有import语句的位置即可
import { login } from '../actions/userActions'

代码中存在的其他隐藏问题（修复核心报错后会陆续触发，建议一并修改） #

• Reducer状态更新错误：当前userLoginReducer在USER_LOGIN_REQUEST分支直接返回{ loading: true }，会覆盖掉原有状态中存储的userInfo等字段，不符合Redux状态更新的不可变要求，需要修改为展开原有状态后更新对应字段：

case USER_LOGIN_REQUEST:
    return { ...state, loading: true }

• Reducer初始值结构错误：你当前在userLoginReducer中定义的initialState嵌套了一层userLogin，但userLoginReducer本身就对应Redux store中userLogin字段的状态，嵌套会导致useSelector读取状态时多一层结构，无法正常取到userInfo、loading、error字段。需要把初始值修改为：

const initialState = {
    loading: false,
    userInfo: userInfoFromStorage,
    error: null
}

• 路由跳转API不匹配：你当前使用了React Router v6版本（代码中用了useLocation钩子），但仍在使用旧版本的props.history做跳转，v6版本已经移除了props传递history的能力，登录成功后会触发history未定义的报错，需要替换为useNavigate钩子：
  1. 修改导入语句，引入useNavigate：

  import {Link, useLocation, useNavigate} from 'react-router-dom'
  

  2. 替换组件内的跳转逻辑，删除组件参数里的history，补充钩子调用并修改跳转代码：

  // 组件内加这行
  const navigate = useNavigate()
  
  // 修改useEffect逻辑
  useEffect(() => {
      if(userInfo){
          navigate(redirect)
      }
  },[navigate, userInfo, redirect])
  

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