Tengo un tablero de juego simple en el que quiero calcular una puntuación basada en las "rondas" disponibles para cada jugador. En el pasado, solo hacía nuevas entradas para cada ronda, pero técnicamente no me importan las rondas en sí, solo el jugador y la puntuación. Por lo tanto, me gustaría que el puntaje se actualice cuando un jugador cambia cualquier entrada en su juego al volver a calcular todas las otras rondas para sumar el puntaje.

mi problema está llegando a la sección de calculateScore de puntuación. Mi idea sería obtener de alguna manera los valores de entrada de todas las entradas para la ID de ese jugador, borrar la puntuación y luego volver a calcular la puntuación en función de esas entradas. Pero obviamente estoy abierto a sugerencias ya que soy más nuevo en React.

Juego.tsx

 import React, { useState, useCallback } from "react"; export type Polly = { id: Number name: String rounds: Number score: Number removeable: Boolean } const Game = () => { const rounds: number = 2; const [newPlayer, setNewPlayer] = useState('') const [players, setPlayers] = useState([ { id: 1, name: "Player1", rounds: rounds, score: 0, removeable: false }, { id: 2, name: "Player2", rounds: rounds, score: 0, removeable: false }, ]); const handleCreate = (p: string) => { const newPlayer = { id: Date.now(), name: p, rounds: rounds, score: 0, removeable: true }; setPlayers([...players, newPlayer]) } const handleDelete = useCallback((playerId: number) => { const newPlayers = players.filter((polly: Polly) => polly.id !== playerId) setPlayers(newPlayers) }, [players]) const calculateScore = (roundScore: string, id: number) => { console.log('RoundScore: ' + roundScore + ' id ' + id) const filterPlayer = players.filter((polly: Polly) => polly.id !== id) } return ( <> add players: <input type="text" value={newPlayer} onChange={(e) => setNewPlayer(e.target.value)}/> <button type="button" onClick={() => handleCreate(newPlayer)}>Add Player</button> {players.map((player: any) => ( <div key={player.id}> <span>{player.name}</span> {[...Array(player.rounds)].map((x, i) => ( <input type="number" key={i + 1} name={String(player.id)} onChange={(e) => calculateScore(e.target.value, player.id)}/> ))} {player.removeable ? <button type="button" onClick={() => handleDelete(player.id)}>X</button>: null} {player.score} </div> ))} </> ); }; export default Game;