如何将React中useState数组传递给其他组件？购物车场景求助

1. 状态提升到共同父组件 #

React中组件间共享状态的核心方案是状态提升——把购物车相关的状态和修改逻辑从VideoGame子组件移到所有需要用到该状态的组件（VideoGame、ShoppingCart）的共同父组件中，让父组件作为唯一的数据源。

2. 重构组件逻辑 #

步骤1：父组件统一管理游戏数据和购物车操作 #

假设你的根组件是App.js，将游戏数据、状态及修改方法都集中在这里：

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

function App() {
  // 用useState维护可修改的游戏数据，替代静态的VideoGameList
  const [games, setGames] = useState(initialGames);

  // 定义添加/移除购物车的方法
  const toggleCartStatus = (gameId) => {
    setGames(prevGames => 
      prevGames.map(game => 
        game.id === gameId ? {...game, inCart: !game.inCart} : game
      )
    );
  };

  // 派生购物车内容：从games中过滤出已加入购物车的项
  const cartItems = games.filter(game => game.inCart);

  return (
    <div className="game-store">
      <div className="game-list">
        {games.map(game => (
          <VideoGame 
            key={game.id} 
            game={game} 
            toggleCart={toggleCartStatus} 
          />
        ))}
      </div>
      <ShoppingCart cartItems={cartItems} />
    </div>
  );
}

export default App;

步骤2：修改VideoGame组件，移除局部状态 #

删掉VideoGame里的局部cart状态，改用父组件传递的游戏数据和操作方法：

function VideoGame({ game, toggleCart }) {
  return (
    <div className="game-card">
      <h3>{game.title}</h3>
      <p>价格：${game.price}</p>
      <button onClick={() => toggleCart(game.id)}>
        {game.inCart ? '从购物车移除' : 'Add to Cart'}
      </button>
    </div>
  );
}

export default VideoGame;

步骤3：ShoppingCart组件通过props获取购物车数据 #

现在ShoppingCart可以直接通过props拿到合法的购物车数据，不会出现未定义错误：

function ShoppingCart({ cartItems }) {
  const total = cartItems.reduce((sum, item) => sum + item.price, 0);

  return (
    <div className="shopping-cart">
      <h2>购物车</h2>
      {cartItems.length === 0 ? (
        <p>购物车为空</p>
      ) : (
        <>
          <ul>
            {cartItems.map(item => (
              <li key={item.id}>
                {item.title} - ${item.price}
              </li>
            ))}
          </ul>
          <p>总价：${total.toFixed(2)}</p>
        </>
      )}
    </div>
  );
}

export default ShoppingCart;

3. 方案核心优势 #

• 解决状态共享问题：父组件作为唯一数据源，所有子组件都能获取到最新的购物车状态
• 消除未定义错误：cartItems由父组件初始化并传递，至少是一个空数组，不会出现undefined
• 保证数据一致性：修改inCart字段时直接更新父组件的游戏状态，所有依赖该数据的组件会自动同步渲染

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