React TypeScript：对象数组的useState在for循环中仅更新一次

我是TypeScript新手，正在开发React Native TS移动端应用，想要将X名玩家随机分配到X支队伍中。遇到异常行为：用于更新状态数组中队伍的for循环在日志中显示执行了两次，但groupsWPlayers状态仅最后一次更新生效，仅渲染最后一个组；保存VS Code文档后第二次状态更新才会生效。希望了解该问题的原因。

状态与分配函数 #

const [groupsWPlayer, setGroupsWPlayers] = useState<{title: string; players:string[]}[]>([]);
const [groups, setGroups] = useState<string[]>(route.params?.groups);
const [players, setPlayers] = useState<string[]>(route.params?.players);

const AsignPlayersToGroupsAtRandom = () => {
  setPlayers(arrayShuffle(players));
  for(let i =0; i <= groups.length-1; i++){
    console.log(i + " / " + groups.length);
    console.log("Group  =  " + groups[i]);
    setGroupsWPlayers([...groupsWPlayer, {title:groups[i], players:players}])
  }
}

渲染代码 #

{groupsWPlayer.map((group, index) => (
  <View key={index}>
    <Text> title = {group.title}</Text>
    <Text>{group.players}</Text>
    <Text>{groupsWPlayer.length}</Text>
  </View>
))}

0 / 2
Group  =  Ok (group name)
1 / 2
Group  =  Niet oke (group name)

核心原因 #

1. 状态更新的闭包陷阱：AsignPlayersToGroupsAtRandom执行时，groupsWPlayer会被闭包捕获为当前的初始值（空数组）。循环里每次调用setGroupsWPlayers，都是基于这个空数组添加新组，相当于两次更新都是[新组]，最终只有最后一次更新会保留。
2. React的批量更新机制：React会批量处理同步事件中的多次setState调用，这些更新不会立即触发组件重新渲染，而是合并后一次性更新，进一步导致中间状态被覆盖。
3. setPlayers的异步特性：setPlayers(arrayShuffle(players))是异步操作，循环内用到的players还是未洗牌的旧值，会导致分配逻辑不符合预期。

解决方案 #

方案1：构建完整数组后一次性更新状态

避免多次调用setState，先组装好所有分组数据再更新状态，这是最高效的方式：

const AsignPlayersToGroupsAtRandom = () => {
  const shuffledPlayers = arrayShuffle([...players]);
  setPlayers(shuffledPlayers);
  
  // 按组数分配玩家（此处示例为每组1个玩家，可按需调整拆分逻辑）
  const newGroups = groups.map((group, index) => ({
    title: group,
    players: [shuffledPlayers[index]]
  }));
  
  setGroupsWPlayers(newGroups);
}

方案2：使用函数式更新（适用于分步更新场景）

如果必须分步更新状态，使用setState的函数式形式，每次基于最新状态进行修改：

const AsignPlayersToGroupsAtRandom = () => {
  const shuffledPlayers = arrayShuffle([...players]);
  setPlayers(shuffledPlayers);
  
  // 先清空旧分组，再逐个添加新分组
  setGroupsWPlayers([]);
  groups.forEach(group => {
    setGroupsWPlayers(prevGroups => [...prevGroups, { title: group, players: [shuffledPlayers[index]] }]);
  });
}

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