React Context API实现购物车时调用addItem方法报不是函数错误

addItem不是函数的核心原因是useContext(ShoppingCartContext)拿到的上下文对象中不存在该方法，常见触发原因和修复方法如下：

• 最常见原因：未在调用组件的上层挂载ShoppingCartProvider
  你创建Context时传入的默认值是{} as ShoppingCartContextType，属于空对象强制断言为目标类型，本身没有任何属性方法。如果组件没有被ShoppingCartProvider包裹，useContext会直接读取这个默认空对象，调用addItem就会报错。
  修复方法：在应用根组件（或BuyButton所在组件的上层）嵌套ShoppingCartProvider，示例：

  // 根组件示例
  import { ShoppingCartProvider } from './contexts/shoppingCart';
  import { AuthProvider } from './contexts/auth';
  
  function App() {
    return (
      <AuthProvider>
        <ShoppingCartProvider>
          {/* 你的路由、页面组件，所有使用购物车Context的组件都要放在这层内部 */}
          <AppRoutes />
        </ShoppingCartProvider>
      </AuthProvider>
    );
  }
  

• 优化Context默认值，提升排查效率
  可以给默认Context添加兜底实现，未套Provider时会抛出明确的错误提示，避免模糊的「不是函数」报错：

  // 修改购物车Context中createContext部分的代码
  const ShoppingCartContext = createContext<ShoppingCartContextType>({
    list: 0,
    addItem: async () => { throw new Error('请确认组件处于ShoppingCartProvider内部') },
    logout: () => { throw new Error('请确认组件处于ShoppingCartProvider内部') }
  });
  

• 检查导入路径
  确认BuyButton组件中导入ShoppingCartContext的路径和你定义购物车Context的文件路径完全匹配，避免导入错误的对象。

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