React电商购物车按钮报错onUpdateCartQty is not a function

你遇到的Uncaught TypeError: onUpdateCartQty is not a function错误是props传参位置错误导致的，具体问题点：

• React Router v6中<Route>组件仅支持path、element两个合法属性，你把handleUpdateCartQty、handleRemoveFromCart、handleEmptyCart三个方法直接写在了<Route>标签属性上，根本没有传递给<Cart>组件。
• 后续<Cart>组件渲染<CartItem>时，拿不到上层传递的onUpdateCartQty方法，解构得到的值为undefined，点击按钮调用时就会抛出「不是函数」的错误。
• 额外注意：App中定义的方法是handleXxx命名格式，传给子组件时要匹配子组件接收的onXxx命名规则，直接传handleXxx命名的属性会导致子组件解构不到对应props。

首先修正App.js中/cart路由的写法，把所有需要传给Cart组件的props都写到element属性内部的<Cart>标签上：

// 修正后的/cart路由代码
<Route 
  path="/cart" 
  element={
    <Cart 
      cart={cart}
      onUpdateCartQty={handleUpdateCartQty}
      onRemoveFromCart={handleRemoveFromCart}
      onEmptyCart={handleEmptyCart}
    />
  }
/>

其次确认Cart.jsx正确接收props，并把对应方法透传给CartItem组件，核心参考写法：

// Cart.jsx核心逻辑
const Cart = ({ cart, onUpdateCartQty, onRemoveFromCart, onEmptyCart }) => {
  const classes = useStyles();
  if (!cart.line_items) return '加载中';

  return (
    <Container>
      <div className={classes.toolbar} />
      <Typography className={classes.title} variant="h3" gutterBottom>我的购物车</Typography>
      <Grid container spacing={3}>
        {cart.line_items.map((lineItem) => (
          <Grid item xs={12} sm={4} key={lineItem.id}>
            {/* 把方法正确透传给CartItem */}
            <CartItem 
              item={lineItem} 
              onUpdateCartQty={onUpdateCartQty} 
              onRemoveFromCart={onRemoveFromCart}
            />
          </Grid>
        ))}
      </Grid>
      {/* 其余购物车逻辑 */}
    </Container>
  );
};

• 所有组件props必须直接写在被渲染的组件标签上，不要写到<Route>这类父级容器组件的属性上
• 子组件解构的props名要和父组件传递的属性名完全一致，比如子组件接收onUpdateCartQty，父组件传递时属性名就不能写成handleUpdateCartQty
• 可以在CartItem组件开头加console.log(typeof onUpdateCartQty)，控制台输出function就说明传值成功，点击按钮不会再报错

内容的提问来源于stack exchange，提问作者Lamont Barnett