Question

未捕获的类型错误：无法读取未定义的属性（读取“reduce”）

2023-01-13

1414

javascript reactjs reduce react-context createcontext

我尝试通过单击添加按钮来更新计数器，因此我通过购物车上下文传递数据并读取它来更新我的计数器，但应用程序一直给我“reduce”的未定义错误

所以这是代码：

const HeaderCartButton = (props) => {
  const cartCtx = useContext(CartContext);

  const numberOfCartItems = cartCtx.items.reduce((curNumber, item) => {
    
    return curNumber + item.amount;
    
  }, 0);

  return (
    <button className={classes.button} onClick={props.onClick}>
      <span className={classes.icon}>
        <CartIcon />
      </span>
      <span>Your Order</span>
      <span className={classes.badge}>{numberOfCartItems}</span>
    </button>
  );
};

所以我相信它无法从“CartContext”读取变量这是CartContext：

const CartContext = React.createContext({
  items: [],
  totalAmount: 0,
  addItem: (item) => {},
  removeItem: (id) => {},
});```



I dont think the problem would be with the React.createContext

Answer 1

const numberOfCartItems = cartCtx?.items?.reduce((curNumber, item) => {

return curNumber + item.amount; }, 0);

如果配合Optional chaining使用，可以在数据到达后再进行操作，我觉得这种用法可以解决问题。

Answer 2

您应该检查 CartProvider 中的“items”是否与您在 Reducer 中使用的相同

const CartProvider=props=>{
    const addItemCartHandler=item=>{

    };
    const removeItemFromCartHandler=id=>{
       
    }
    const cartContext={
        items:[],
        totalAmount:0,
        addItem: addItemCartHandler,
        removeItem: removeItemFromCartHandler,
    };
    return <CartContext.Provider value={cartContext}>
              {props.children}
    </CartContext.Provider >
}