Shorten my code to one usestate hook, I have some problems with that

Question

const RspGame = () => {

    const selection = [ROCK, PAPER, SCISSORS];

    const [select, setPlayersSelect] = useState({
        playerChoice: '',
        computerChoice: '',
        winner: ''
    });

    const [player, setPlayerWin] = useState(0);
    const [computer, setComputerWin] = useState(0);



        const PLAYERS_CHOICE = (choice) => {
        const choiceP1 = choice;
        const choiceP2 = selection[Math.floor(Math.random() * 3)];
        const winner = COMPARE_SELECTIONS(choiceP1, choiceP2);
        setPlayersSelect({
            playerChoice: choiceP1,
            computerChoice: choiceP2,
            winner,
        });
    }

    const COMPARE_SELECTIONS = (P1, P2) => {
        if (P1 === P2) {
            console.log(DRAW);
            return DRAW
        } else if (
            (P1 === PAPER && P2 === ROCK)
            ||
            (P1 === SCISSORS && P2 === PAPER)
            ||
            (P1 === ROCK && P2 === SCISSORS)
        ) {
            console.log(PLAYER_WIN);
            setPlayerWin(player + 1)
            return PLAYER_WIN;
        } else {
            console.log(COMPUTER_WIN);
            setComputerWin(computer + 1)
            return COMPUTER_WIN;
        }

    }        
    return (
        <div className='game-wrapper'>
            <span className="score">
                <h1 className="playerCount">{player}</h1>
                <h1>-</h1>
                <h1 className="computerCount">{computer}</h1>
            </span>
            <span className='selection'>
                    <h3>{select.playerChoice}</h3>
                    <h3>{select.computerChoice}</h3>
                </span>
            <span className='btn-wrapper'>
                <Button clicked={() => PLAYERS_CHOICE(ROCK)} class='btn'>ROCK</Button>
                <Button clicked={() => PLAYERS_CHOICE(PAPER)} class='btn'>PAPER</Button>
                <Button clicked={() => PLAYERS_CHOICE(SCISSORS)} class='btn'>SCISSORS</Button>
            </span>
        </div>
    );
};

export default RspGame;

i'd like it to look like this:

 const [select, setPlayersSelect] = useState({ playerChoice: '', computerChoice: '', winner: { playerCount: 0, computerCount: 0, } });

what must be changed? May be you know how to improve my code in other ways or to do it with redux for variety! When i put setPlayersSelect(select.winner.playerCount + 1) in if statement and put {select.winner.playerCount} in player-score place, it does not work, just disappears

Answer 1

setPlayersSelect(select.winner.playerCount + 1)

您的select是一个对象，使用这样的命令将状态更改为一个数字，而不是尝试：

setPlayersSelect(prev => {...prev, winner: {playerCount: prev.winner.playerCount + 1} });