React购物车组件条件渲染问题：仅展示inCart为true的商品

核心问题排查与修复步骤 #

1. 修正商品过滤逻辑 #

你之前直接访问数组的inCart属性是错误的——数组本身没有这个属性，只有数组内的每个游戏对象才有。必须先过滤出inCart为true的商品。

2. 修复条件渲染语法 #

确保用正确的JSX条件渲染语法，根据过滤后的商品数量切换空购物车提示和商品列表的显示。

完整修复代码 #

// ShoppingCart.js
import React from 'react';
import { games } from './VideoGameList';
import Header from './Header';
import EmptyCartImage from './empty-cart.png'; // 替换为你的空购物车图片路径

const ShoppingCart = () => {
  // 筛选出已加入购物车的商品
  const cartItems = games.filter(game => game.inCart === true);

  return (
    <div className="shopping-cart">
      <Header />
      {/* 条件渲染逻辑 */}
      {cartItems.length === 0 ? (
        <div className="empty-cart">
          <h2>购物车是空的</h2>
          <img src={EmptyCartImage} alt="空购物车" />
          <p>快去挑选喜欢的游戏吧！</p>
        </div>
      ) : (
        <div className="cart-items">
          <h2>我的购物车</h2>
          <ul>
            {cartItems.map((game) => (
              <li key={game.id}> {/* 建议用唯一id作为key，不要用index */}
                <h3>{game.name}</h3>
                <p>价格：${game.price}</p>
                {/* 可添加移除购物车等操作按钮 */}
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default ShoppingCart;

配套的VideoGameList.js导出格式参考 #

确保数组导出正确，每个游戏对象包含inCart字段：

// VideoGameList.js
export const games = [
  { id: 1, name: "赛博朋克2077", price: 59, inCart: false },
  { id: 2, name: "艾尔登法环", price: 69, inCart: true },
  { id: 3, name: "星露谷物语", price: 14, inCart: false },
];

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