React中如何单独修改指定key的EnemyHand组件的playerMoney值？

你当前的问题核心是用了单一状态管理两个敌人的金钱，导致修改时两个组件同步变化。要实现单独控制某个EnemyHand的金钱，需要把状态设计成每个敌人独立的结构，具体步骤如下：

1. 重构状态结构 #

把原本单一的playerMoney改成存储每个敌人金钱的对象（用对象更直观对应组件key）：

const [enemyMoneys, setEnemyMoneys] = useState({
  2: 0,    // key=2的敌人初始金钱
  3: 100   // key=3的敌人初始金钱设为100，满足你的需求
});

2. 编写针对单个敌人的更新函数 #

使用函数式更新确保获取最新状态值，避免状态更新依赖旧值的问题：

// 传入敌人的key，更新对应金钱
function updateEnemyMoney(enemyKey) {
  setEnemyMoneys(prevState => ({
    ...prevState, // 保留其他敌人的金钱数据
    [enemyKey]: prevState[enemyKey] + 10 // 给指定敌人加10
  }));
}

3. 传递对应敌人的金钱给组件 #

渲染EnemyHand时，分别传入对应key的金钱值：

<EnemyHand key={2} player_money={enemyMoneys[2]} />
<EnemyHand key={3} player_money={enemyMoneys[3]} />

4. 给目标敌人添加操作按钮 #

如果要单独给key=3的敌人加钱，按钮可以这么写：

<button onClick={() => updateEnemyMoney(3)}>给敌人3加10 €</button>

为什么之前的方法无效？ #

• React的key属性是给React内部用来识别组件身份、优化渲染的，不能用来定位或操作组件。
• 直接用document.getElementById这类DOM操作违背了React"状态驱动UI"的设计理念，React会通过状态变化自动更新UI，不需要手动操作DOM。

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