React报错Cannot read property 'reduce' of undefined如何解决？

云上老周

2026-10-10

报错根因

Cannot read property 'reduce' of undefined 本质是你调用reduce方法的cartCtx.items为undefined，而非预期的数组。虽然你在CartContext.createContext时定义了默认items: []，但这个默认值仅在HeaderCartButton组件未被CartContext.Provider包裹时才会生效，触发该报错的常见原因如下：

你在项目中使用了CartContext.Provider包裹组件树，但没有给Provider的value属性传入items字段，或是items字段拼写错误
传递给Provider的value中的items在逻辑中被误赋值为undefined，比如异步请求购物车数据完成前，没有给items设置初始空数组
HeaderCartButton组件被放在了CartContext.Provider的外部，无法拿到Provider传递的上下文值

解决方案

首先检查组件嵌套层级，确保HeaderCartButton放在CartContext.Provider内部，且Provider的value属性正确配置包含items字段的对象，参考示例：

// App.js 参考代码
import { useState } from 'react';
import CartContext from './store/Cart-Context';
import HeaderCartButton from './components/Layout/HeaderCartButton';

function App() {
  // 购物车状态默认必须给items赋值空数组
  const [cartData, setCartData] = useState({
    items: [],
    totalAmount: 0
  });

  const addItem = (item) => {
    // 你的添加购物车逻辑
  };

  const removeItem = (id) => {
    // 你的删除购物车逻辑
  };

  return (
    <CartContext.Provider
      value={{
        items: cartData.items,
        totalAmount: cartData.totalAmount,
        addItem,
        removeItem
      }}
    >
      {/* 所有需要使用购物车上下文的组件都要放在Provider内部 */}
      <HeaderCartButton />
      {/* 其余业务组件 */}
    </CartContext.Provider>
  );
}

export default App;

给调用reduce的逻辑添加兜底判断，避免异常场景下的报错，两种可选写法：

可选链+空值合并写法：

const numofCartItems = cartCtx.items?.reduce((curNum, item) => curNum + item.amount, 0) ?? 0;

数组默认值兜底写法：

const numofCartItems = (cartCtx.items || []).reduce((curNum, item) => curNum + item.amount, 0);

排查所有修改购物车items的逻辑，确保不会出现将items赋值为undefined的操作，异步初始化购物车数据时，也要先给items设置空数组作为初始值。

内容的提问来源于stack exchange，提问作者Jeshant Kalita