Javascript 加在球员的总分上

当一名球员得分时，我想在球员总分（totPoints）上加+1。 不幸的是，我现在的代码：

  const [number, setNumber] = useState('');
  const [totPoints, setTotPoints] = useState(0);
  const [scorers, setScorers] = useState([]);

  const sortedScorers = [...scorers].sort((a, b) => a.number - b.number);
  const onePointScoredHandler = () => {
    const players = [...scorers];

    const pos = players.map((player) => player.number).indexOf(+number);

    if (pos !== -1) {
      console.log('exist');
      players[pos].totPoints = setTotPoints(totPoints + 1);
      setScorers(players);
    } else {
      console.log('new');
      const newScorer = {
        id: nanoid(4),
        number: +number,
        totPoints: totPoints + 1,
      };
      setScorers([...scorers, newScorer]);
      setTotPoints(totPoints);
    }
    setNumber('');
    console.log(scorers);
  };

  return (
    <div className="App">
      <h4>Individual points</h4>
      <br />
      <br />
      <br />
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />
      <br />
      <br />
      <button onClick={onePointScoredHandler}>Add 1p</button>
      <br />
      <br />
      <table className="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>NUMBER</th>
            <th>Total Points</th>
          </tr>
        </thead>
        <tbody>
          {sortedScorers
            .sort((a, b) => a.number - b.number)
            .map((player) => (
              <tr key={player.id}>
                <td>{player.id}</td>
                <td>{player.number}</td>
                <td>{player.totPoints}</td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
};

const[number，setNumber]=useState（“”）；
常数[totPoints，setTotPoints]=useState（0）；
常量[记分器，设置记分器]=使用状态（[]）；
const sortedScorers=[…scorers].sort（（a，b）=>a.number-b.number）；
const onePointScoredHandler=（）=>{
常量玩家=[…记分员]；
const pos=players.map（（player）=>player.number）.indexOf（+number）；
如果（位置！=-1）{
log（'exist'）；
玩家[pos].totPoints=设置点（totPoints+1）；
定位球手（球员）；
}否则{
console.log（'new'）；
常数新闻采集器={
id:nanoid（4），
编号：+number，
总积分：总积分+1，
};
记分员（[…记分员，新闻记分员]）；
设定值（totPoints）；
}
设置编号（“”）；
控制台日志（记分器）；
};
返回(
个别点






setNumber（e.target.value）}
/>




加1便士




身份证件
数
总分
{分拣机
.sort（（a，b）=>a.number-b.number）
.map（（播放器）=>(
{player.id}
{player.number}
{player.totPoints}
))}
);
};

不按预期工作：

当玩家第一次得分时，它起作用，即totPoints=1

如果该球员再次得分，我将获得积分：未定义

如果现在有一名新玩家得分，则总积分为2，而不是应该的1

我希望这次你能救我。。。。 提前谢谢

问候 彼得

附言：我已经试过了

players[pos].totPoints=setTotPoints（（prevState）=>prevState+1）

同样令人失望的结果…

问题 您正在改变状态对象

players[pos].totPoints = setTotPoints(totPoints + 1); // mutation!!
setScorers(players);

即使您使用

constplayers=[…scorers]复制了数组数组中的元素仍然引用旧数组的元素

解决方案
使用功能状态更新来匹配以前的记分员，以增加他们的
totPoints
值。请记住，更新React状态时，必须浅层复制正在更新的任何状态，包括嵌套状态

setScorers((scorers) =>
  scorers.map((scorer, index) =>
    index === pos
      ? {
          ...scorer,
          totPoints: scorer.totPoints + 1
        }
      : scorer
  )
);

如何添加新玩家。我不能添加多个玩家，因为当我第一次点击按钮时。它一直进入
exist
。我输入一个数字I输入字段，然后单击button@Shyam：可能是因为在单击之前必须在输入中输入数字？不能将字段留空Tanks@Drew Reese:-）你的意思是我不需要/不应该使用
indexOf（）
，而是应该使用你的解决方案吗？这并不是说你不应该使用
indexOf
，但这里要考虑的一点是不应该直接改变状态。谢谢！现在我明白了。我年纪大了，思维迟钝…@lelkes我的解决方案仍然使用
indexOf
中计算出的
pos
值，因此它知道匹配/更新哪个索引。您仍然需要首先搜索数组，以了解是添加新元素还是更新现有元素。别忘了在stackoverflow上对您觉得有用的答案和评论进行投票。干杯，祝你好运。