Next.js中useCart自定义Hook报错：useCart is not a function求助

核心错误排查步骤 #

1. 检查组件导入方式 #

你的useCart是命名导出，必须在使用组件中用命名导入，否则会导致useCart为undefined，触发报错：

// 正确写法
import { useCart } from '@/contexts/CartContext'; // 路径根据你的项目结构调整

// 错误写法（禁止使用）
import useCart from '@/contexts/CartContext';

2. 确认调用组件为客户端组件 #

在Next.js App Router中，所有使用React Hooks（包括useContext）的组件必须添加"use client"指令，放在文件最顶部：

"use client"; // 必须添加这一行
import { useCart } from '@/contexts/CartContext';

const CartPage = () => {
  const { cart, dispatch } = useCart();
  // ... 其他业务代码
};

如果组件是服务器组件（无"use client"），调用客户端钩子会导致useCart被错误解析，触发is not a function错误。

3. 验证CartProvider的包裹范围 #

确认app/layout.js中正确用CartProvider包裹了所有需要访问购物车的组件：

// app/layout.js
import { CartProvider } from '@/contexts/CartContext';

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

Next.js购物车实现优化方案 #

1. 加入本地存储持久化 #

当前购物车数据刷新页面即丢失，可在CartProvider中同步数据到localStorage：

"use client";
import React, { createContext, useReducer, useContext, useEffect } from "react";

const CartContext = createContext();

const cartReducer = (state, action) => {
  // 保留原有的ADD_TO_CART、REMOVE_FROM_CART逻辑
  switch (action.type) {
    case "ADD_TO_CART":
      const existingItem = state.find((item) => item.id === action.payload.id);
      if (existingItem) {
        return state.map((item) =>
          item.id === action.payload.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      } else {
        return [...state, { ...action.payload, quantity: 1 }];
      }
    case "REMOVE_FROM_CART":
      return state.filter((item) => item.id !== action.payload.id);
    default:
      return state;
  }
};

export const CartProvider = ({ children }) => {
  // 从localStorage读取初始数据
  const initialState = JSON.parse(localStorage.getItem('cart')) || [];
  const [cart, dispatch] = useReducer(cartReducer, initialState);

  // 购物车变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(cart));
  }, [cart]);

  return (
    <CartContext.Provider value={{ cart, dispatch }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error("useCart must be used within a CartProvider");
  }
  return context;
};

2. 封装购物车操作方法 #

将dispatch操作封装到useCart中，避免组件直接操作dispatch，提升代码可维护性：

export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error("useCart must be used within a CartProvider");
  }
  const { cart, dispatch } = context;

  // 封装添加商品方法
  const addToCart = (item) => {
    dispatch({ type: "ADD_TO_CART", payload: item });
  };

  // 封装删除商品方法
  const removeFromCart = (itemId) => {
    dispatch({ type: "REMOVE_FROM_CART", payload: { id: itemId } });
  };

  // 封装修改数量方法（需在reducer中新增对应分支）
  const updateQuantity = (itemId, quantity) => {
    dispatch({ type: "UPDATE_QUANTITY", payload: { id: itemId, quantity } });
  };

  return { cart, addToCart, removeFromCart, updateQuantity };
};

对应的cartReducer新增UPDATE_QUANTITY分支：

case "UPDATE_QUANTITY":
  return state.map(item => 
    item.id === action.payload.id 
      ? { ...item, quantity: Math.max(1, action.payload.quantity) } // 确保数量不小于1
      : item
  );

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