React电商网站购物车问题求助：数据不渲染+商品信息异常

问题1：商品详情在控制台存在但页面不显示 #

原因 #

Cart组件中cartItems.map的回调函数未返回JSX元素，仅定义了DOM结构但没有显式/隐式返回，导致React无法渲染该部分内容。

修复代码（Cart.js） #

修改map回调逻辑，使用箭头函数隐式返回JSX，同时修正图片字段（原数据中图片字段为imageUrl而非image）：

import React from 'react'

const Cart = ({ cartItems }) => {
    return (
        <div>
            <div>
                {cartItems.length === 0 && <p>no items added</p>}
            </div>
            <div>
                {cartItems.map(item => (
                    <div key={item.id}>
                        <img src={item.imageUrl} alt={item.name} />
                        <h3>{item.name}</h3>
                        <p>${item.price}</p>
                        <p>数量: {item.quantity}</p>
                    </div>
                ))}
            </div>
        </div>
    )
}
export default Cart

问题2：添加不同商品仅数量变化，其他数据一致 #

原因 #

1. 商品数据传递错误：App组件中使用数组解构const [productItems]= shopData，仅取了shopData的第一个元素，导致所有添加操作都指向同一个商品；
2. 按钮传参错误：ProductsDisplay组件的「加入购物车」按钮传递的是productItems（错误的单商品/数组），而非当前遍历的item，导致每次添加的都是同一个商品。

修复步骤 #

1. 修复App.js的商品数据赋值

// App.js
// 原代码
const [productItems]= shopData;
// 修改为（直接赋值整个商品数组）
const productItems = shopData;

2. 修复ProductsDisplay.js的按钮传参

// ProductsDisplay.js
// 原代码
<button onClick={() => handleAddProduct(productItems)}>add to cart</button>
// 修改为（传递当前遍历的商品item）
<button onClick={() => handleAddProduct(item)}>add to cart</button>

完整修复后的关键代码片段 #

App.js

function App() {
  const productItems = shopData;
  const [cartItems, setCartItems]=useState([]);

  const handleAddProduct=(product)=>{
    const prodExists=cartItems.find(item => item.id === product.id);
    if(prodExists){
      setCartItems(cartItems.map(item => item.id === product.id ? {...prodExists , quantity:prodExists.quantity+1}: item))
    } else {
      setCartItems([...cartItems , {...product , quantity:1}])
    }
  }

  return (
    <BrowserRouter className="App">
    <Routes>
      <Route path='/' exact  element={ <> <ProductsDisplay productItems={productItems} cartItems={cartItems} handleAddProduct={handleAddProduct} />  </>} className="co" />
      <Route path='/cart'  element={<Cart cartItems={cartItems}/>} />
    </Routes>
  </BrowserRouter>
  );
}

ProductsDisplay.js

const ProductsDisplay = ({productItems, cartItems , handleAddProduct}) => {
    return (
        <div>
            {shopData.map((item) => (
                <div key={item.id}>
                    <div>
                        <img src={item.imageUrl} />
                    </div>
                    <div>
                        <h2>{item.name}</h2>
                    </div>
                    <div>
                        {item.price}
                    </div>
                    <div>
                        <button onClick={() => handleAddProduct(item)}>add to cart</button>
                    </div>
                </div>
            ))}

             <Link to="/cart" className='cart-icon'>
            <button>CART</button>
             </Link>
        </div>
    )
}

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