React中如何跨组件修改对象数组的quantity属性？

你的核心问题在于：

1. VideoGameList是静态常量数组，无法直接修改其中的属性值；
2. 组件内的useState(0)是单个全局数量值，无法对应每个游戏的独立quantity；
3. 点击按钮时没有关联到具体游戏，无法精准更新对应游戏的数量。

下面是具体的修正方案：

步骤1：将静态数组转为组件状态 #

把静态的游戏数组放到组件的useState中，这样才能通过React的状态更新机制修改数组内的属性：

import { useState } from 'react';
import VideoGameList from './VideoGameList';

const VideoGame = () => {
  // 将静态数组转为可修改的组件状态
  const [games, setGames] = useState(VideoGameList);

  // 修改addToCart函数，接收游戏ID作为参数，精准更新对应游戏的quantity
  const addToCart = (gameId) => {
    setGames(prevGames => 
      prevGames.map(game => 
        game.id === gameId 
          ? { ...game, quantity: game.quantity + 1 } // 不可变更新：复制原对象再修改属性
          : game
      )
    );
  };

  return (
    <>
      <Header />
      <div>
        {games.map(({ id, title, releaseDate, price, quantity }) => (
          {/* 用游戏ID作为key，符合React列表渲染规范 */}
          <div key={id}>
            <img src={/* 补充游戏图片的实际路径 */} alt={title} />
            <div>
              <p>{title}</p>
              <p>{releaseDate}</p>
            </div>
            <div>
              <p>${price}</p>
              {/* 点击时传递当前游戏的ID，触发对应游戏的数量更新 */}
              <button onClick={() => addToCart(id)}>
                Add to Cart ({quantity})
              </button>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

步骤2：支持跨页面展示购物车内容 #

如果需要在其他页面展示quantity>0的游戏，需要把状态提升到共同的父组件（比如App.js），通过props传递数据和更新函数：

父组件（App.js）示例 #

import { useState } from 'react';
import VideoGame from './VideoGame';
import Cart from './Cart';
import VideoGameList from './VideoGameList';

function App() {
  const [games, setGames] = useState(VideoGameList);

  const addToCart = (gameId) => {
    setGames(prevGames => 
      prevGames.map(game => 
        game.id === gameId 
          ? { ...game, quantity: game.quantity + 1 }
          : game
      )
    );
  };

  // 筛选出数量大于0的游戏，传递给购物车页面
  const cartItems = games.filter(game => game.quantity > 0);

  return (
    <div className="App">
      <VideoGame games={games} addToCart={addToCart} />
      <Cart cartItems={cartItems} />
    </div>
  );
}

子组件（VideoGame.js）修改 #

// 接收父组件传递的games数组和addToCart函数
const VideoGame = ({ games, addToCart }) => {
  return (
    <>
      <Header />
      <div>
        {games.map(({ id, title, releaseDate, price, quantity }) => (
          <div key={id}>
            <img src={/* 游戏图片路径 */} alt={title} />
            <div>
              <p>{title}</p>
              <p>{releaseDate}</p>
            </div>
            <div>
              <p>${price}</p>
              <button onClick={() => addToCart(id)}>
                Add to Cart ({quantity})
              </button>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

购物车组件（Cart.js）示例 #

const Cart = ({ cartItems }) => {
  return (
    <div>
      <h2>购物车</h2>
      {cartItems.length === 0 ? (
        <p>购物车是空的</p>
      ) : (
        <div>
          {cartItems.map(item => (
            <div key={item.id}>
              <p>{item.title}</p>
              <p>数量: {item.quantity}</p>
              <p>总价: ${(item.price * item.quantity).toFixed(2)}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

关键注意点 #

• 不可变更新：修改数组或对象时，不能直接修改原数据，必须创建新的对象/数组（比如用...展开运算符），否则React无法检测到状态变化；
• 唯一key：列表渲染时必须使用唯一的key（比如游戏ID），不能用索引，避免渲染异常；
• 状态共享：多组件需要访问同一数据时，状态提升是最简单的方案，复杂场景可以考虑使用Context或Redux。

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