React useState使用时报TypeError: scorers is not iterable如何解决？

问题根源 #

1. 错误出在existingScorer匹配成功的代码分支：setScorers(existingScorer)直接将单个球员对象赋值给了scorers状态，而scorers初始定义为数组类型，类型被覆盖后，后续渲染执行[...scorers]展开语法时，尝试迭代普通对象自然抛出不可迭代的类型错误。
2. 附加逻辑错误：existingScorer.totPoints = setTotPoints((prevState) => prevState + 1)的写法有误，useState的状态更新函数无返回值，会导致球员总分被赋值为undefined。

修复代码 #

只需修改onePointScoredHandler中匹配到现有球员的分支逻辑即可：

const onePointScoredHandler = () => {
  const players = [...scorers];
  const existingScorer = players.find((player) => player.number === +number);

  if (existingScorer) {
    console.log('exist');
    // 直接修改浅拷贝数组内的球员总分
    existingScorer.totPoints += 1;
    // 传入完整数组更新状态，保持scorers始终为数组类型
    setScorers(players);
    // 单独调用totPoints的更新函数
    setTotPoints(prevState => prevState + 1);
  } else {
    // 原有新增逻辑无需修改
    console.log('new');
    const newScorer = {
      id: nanoid(4),
      number: +number,
      totPoints: totPoints + 1,
    };
    setScorers([...scorers, newScorer]);
  }
  setNumber('');
};

优化建议 #

你已经在渲染前通过const sortedScorers = [...scorers].sort(...)生成了排序后的数组，表格渲染时无需重复执行sort逻辑，删除{sortedScorers.sort((a, b) => ...)}中的排序代码即可减少无意义的重复计算。

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