React类型:对象数组的UseState仅在for循环中更新一次

rsaldnfx  于 2022-12-14  发布在  React
关注(0)|答案(1)|浏览(240)

所以,我是一个新的 typescript 和尝试的东西。我想随机X数量的球员之间的X数量的团队/组玩游戏。(React原生ts移动的应用程序)
奇怪的行为(至少对我来说),我用来更新状态数组中的团队的for循环确实运行了两次,因为我可以在日志中看到它,如果我保存我的VS代码文档,状态数组中的第二次更新确实发生了,但当然我希望第一次是正确的。
第一个
日志/ 0 / 2日志组= Ok(组名)日志1 / 2日志组= Niet oke(组名)
但它只渲染了最后一组,而不是第一组和最后一组,这是我想要的。
所以出于某种原因setGroupsWPlayers只运行一次,有人知道为什么吗?有人愿意向我解释为什么吗?即使这是一个新手的错误,我也在努力学习。提前感谢

5sxhfpxr

5sxhfpxr1#

这个问题是由于setGroupsWPlayers没有立即更新实际的groupsWPlayer。更新只会在下一次渲染时发生,所以基本上只会应用setGroupsWPlayers循环的最后一次调用。...groupsWPlayer在这里总是相同的,所以在for循环中的第一次渲染时,你总是会从它那里得到[]
添加一个临时变量来存储所有内容,并且只在循环外调用setGroupsWPlayers一次。

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

注意:如果您还希望在setPlayers(arrayShuffle(players));之后立即更新players-这不会发生,它将仅在下一次渲染时更新。

相关问题