React+TS登录页提交报Cannot read property 'type' of undefined如何解决

该错误和TypeScript无关，是Redux action调用异常导致的：Redux中间件在处理你提交的action时，拿到的action值为undefined，所以读取action.type属性时直接抛出了报错。

常见触发原因 #

• actions/auth文件内的login函数导出/导入方式不匹配：比如你是默认导出login，但代码里用了命名导入import { login } from "actions/auth"，或者反过来命名导出却用了默认导入，导致最终导入的login本身就是undefined，调用后返回值也为undefined
• login作为Redux thunk函数没有正确返回值：thunk要求action creator返回一个接收dispatch/getState参数的函数，如果你漏写了return，调用login后返回的就是undefined，dispatch时就会触发报错
• 小概率是Redux store的thunk中间件配置异常，没有正确处理异步action

排查解决步骤 #

1. 优先检查导入导出逻辑
   打开actions/auth文件，确认导出方式：
   如果是默认导出：

const login = (email:string, password:string) => async (dispatch) => {/* 逻辑 */}
export default login

那么导入语句要改成：

import login from "actions/auth"

如果是命名导出：

export const login = (email:string, password:string) => async (dispatch) => {/* 逻辑 */}

才可以用import { login } from "actions/auth"的写法。

2. 检查login thunk的返回值
   确保login函数执行后返回的是处理异步逻辑的函数，示例正确写法：

export const login = (email: string, password: string) => {
  // 这里必须return这个接收dispatch的函数！
  return async (dispatch) => {
    try {
      // 调用登录接口的逻辑
      const res = await loginApi({ email, password })
      dispatch({ type: 'LOGIN_SUCCESS', payload: res.data })
    } catch (err) {
      dispatch({ type: 'LOGIN_FAIL', payload: err })
    }
  }
}

3. 临时调试验证
   可以在登录页的onSubmit函数里加打印快速定位问题：

const onSubmit = (e:any) => {
    e.preventDefault();
    console.log(login) // 打印为undefined则是导入导出问题
    console.log(login(email, password)) // 打印为undefined则是login函数没有正确返回thunk
    login(email, password);
};

额外优化建议 #

你当前给组件props标注的是{login}:any，等于放弃了TypeScript类型检查，所以编辑器才没有提前发现导入错误。后续可以给login加上正确的函数类型，类似问题在开发阶段就能被编辑器直接捕获，不用等到运行时才报错。

内容的提问来源于stack exchange，提问作者Yusuf Doğan