React跨组件传值无法渲染购物车列表项问题求助

排查出的问题及修复方案 #

按影响优先级排序如下：

1. CartList未正确获取购物车数据
   你当前的CartList组件从props接收cart参数，但没有相关逻辑表明你在调用CartList的父组件中从ProductContext取出了cart状态传给它。如果没有正确传值，cart会是undefined，调用map方法会直接报错，自然无法渲染8条记录。
   修复方案：直接在CartList中消费Context，示例如下：

// CartList.js 调整后代码
import React, { useContext } from "react";
import CartItem from "./CartItem";
// 替换为你自己context文件中导出的ProductContext名
import { ProductContext } from "./context"; 

export default function CartList () {
   const { cart } = useContext(ProductContext);
    return (
      <div>
        {cart.map((item) => (
            <CartItem key={item.id} item={item} />
        ))}
      </div>
    )
}

2. addToCart方法的setState写法错误
   你当前把setState的回调函数写到了updater函数的return语句中，逗号运算符会导致updater最终返回的是回调函数而非状态对象，state不会按预期更新：

// 错误写法
this.setState(() => {
  return (
    { products: tempProducts, cart: [...this.state.cart, product] },
    () => console.log(this.state)
  );
});

修复方案：把回调函数放到setState的第二个参数位置：

// 正确写法
this.setState(() => {
  return { products: tempProducts, cart: [...this.state.cart, product] }
}, () => console.log(this.state));

3. openModal方法状态键名拼写错误
   你在state中定义的模态框状态是modalOpen，但openModal方法中设置的是openModal: true，键名不一致会导致模态框无法正常弹出：

// 错误写法
return { modalProduct: product, openModal: true };

修复方案：统一键名：

// 正确写法
return { modalProduct: product, modalOpen: true };

4. CartItem参数写法不规范
   你当前的CartItem参数直接写item，拿到的其实是整个props对象，不是你传递的item属性。虽然现在你没有用到item属性不影响输出文本，但后续开发UI时会出问题，修复方案：

// 调整后写法：解构props取出item
function CartItem({item}) {
  return <div>this is a cart item</div>;
}

内容的提问来源于stack exchange，提问作者na ha