在 React 中单击按钮添加 1

Question

Now it's time for the next phase in my app development:

function App() {
  const [number, setNumber] = useState('');
  const [totPoints, setTotPoints] = useState('');
  const [players, setPlayers] = useState(getLocalStorage());

const onOnePointMade = (e) => {
    e.preventDefault();
    const existingScorer = players.find((player) => player.nummer === number);

    if (existingScorer) {
      setTotPoints(+totPoints + 1);
      const newPlayer = {
        totPoints: totPoints,
      };
      setPlayers([...players, newPlayer]);
      console.log(totPoints);
    } else {
      setTotPoints(+totPoints + 1);
      const newPlayer = {
        id: nanoid(4),
        nummer: number,
        totPoints: totPoints,
      };
      setPlayers([...players, newPlayer]);
    }
    setNumber('');
  };

with the above code, I want in pure English:

1. check if the player (= number ) is on the list players
2. if yes: add 1 (+ 1) to his points scored so far ( totPoints )
3. if no: add number and one point to the list (totPoints = 1)

Grateful for help with this problem as well

Thanks in advance

PS I tried with the code I got from @Robin

const onOnePointMade = (e) => {
    e.preventDefault();
    const scorer = [...players];
    const existingScorer = scorer.find((player) => player.number === number);
    const new_totpoints = totPoints + 1;

    if (existingScorer) {
      setTotPoints(new_totpoints);
      existingScorer.totPoints = new_totpoints;
      setPlayers(scorer);
    } else {
      const newScorer = {
        id: nanoid(4),
        number: number,
        totPoints: new_totpoints,
      };
      setPlayers([...players, newScorer]);
    }
  };

Unfortunately, it did not work quite as I intended: the first time I add player number 3 it will be correct ie 1 point if player number 3 scores more points is added correctly. BUT, Let's say he has scored 3 points, if I now add player number 4, it is listed that he has scored 4 points, instead of 1 point I hope you understand: i attach a link: https://github.com/peter-swe/tot-points

Answer 1

In your code for the existing player block, you are trying to add a new player. By looking at your explanation it should be finding the player and update their totpoints .

We can't update the state's property directly so take a copy of the state, then update the totpoint in the new copy, and set the new copy to the state.

    const _players = [...players];
    const existingScorer = _players.find((player) => player.nummer === number);
    const new_totpoints = totPoints + 1
    if (existingScorer) {
      setTotPoints(new_totpoints);
      existingScorer.totPoints = new_totpoints
      setPlayers(_players);
     }