Next.js调用dispatch报TypeError: dispatch is not a function问题求助

核心原因分析 #

出现TypeError: dispatch is not a function的主要原因有两个：

• 登录组件未被AuthProvider正确包裹，导致useAuthContext()获取到的是createContext({})初始化的空对象，自然不存在dispatch方法。
• 可能在服务器组件中调用了useAuthContext——Next.js的服务器组件不支持React Hooks（包括useContext），此时无法获取到Context中的dispatch。

分步解决方案 #

1. 确保根组件被AuthProvider包裹

在Next.js App Router中，修改根布局文件（app/layout.jsx），用AuthProvider包裹所有子内容：

// app/layout.jsx
'use client'; // 使用React Context需标记为客户端组件
import AuthProvider from '@/src/context/auth/AuthContext';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <AuthProvider>{children}</AuthProvider>
      </body>
    </html>
  );
}

2. 标记登录页面为客户端组件

若登录页面默认是服务器组件，需在文件顶部添加'use client'指令，只有客户端组件才能使用React Hooks：

// 登录页面文件顶部
'use client';
import { useAuthContext } from "@/src/context/auth/AuthContext";
import { useEffect } from 'react';

export default function LoginPage() {
  const { dispatch } = useAuthContext();
  
  useEffect(() => {
    if (success) {
      dispatch({ type: "USER_LOGIN_SUCCESS", payload: response });
    }
    if (error) dispatch({ type: "USER_LOGIN_FAIL", payload: response });
  }, [success, error]);

  return <div>登录页面</div>;
}

3. 修复Reducer中的拼写错误（额外优化）

你的authReducer里把isGuest拼成了isGeust，会导致状态更新后isGuest值不生效，建议修正：

// AuthReducer.jsx
case "USER_LOGIN_SUCCESS":
  return {
    ...state,
    isGuest: false, // 修正拼写
    loginAction: {
      ...state.loginAction,
      inProgress: false,
      succeeded: true,
      finished: true,
      error: "",
    },
    userInfo: action.payload.user,
    token: action.payload.token,
  };

case "USER_LOGIN_FAIL":
  return {
    ...state,
    isGuest: true, // 修正拼写
    loginAction: {
      ...state.loginAction,
      inProgress: false,
      succeeded: false,
      finished: true,
      error: action.payload.error, 
    },
  };

验证步骤 #

1. 重启Next.js开发服务器，确保所有修改生效。
2. 打开登录页面触发登录逻辑，检查是否仍出现dispatch is not a function错误。

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