状态并不总是更新

Question

usestate中的选择变量并不总是更新。在下面的代码中，我显示上下文文件和我的选择组件。上下文文件保留了我的React应用程序的全局状态，并且选择组件被传递了SETCHOICES方法以更新GameContext中的状态。我的setChoices方法应该更新每个选择的值，但是状态仅随机更新，而不是每次更新。

//GameContext file
import React, { createContext, useState } from 'react';
export const GameContext = createContext();
const GameContextProvider = props => {
    const [gameItems, setGameItems] = useState({
        user: {choice: null, score: 0},
        cpu: {choice: null, score: 0}
    })
    const setChoices = (userChoice, cpuChoice) => {
        setGameItems({
            ...gameItems, 
            user:{...gameItems.user, choice: userChoice},
            cpu: {...gameItems.cpu, choice: cpuChoice}
        });  
    }
    const cpuScore = () => {
      setGameItems({
         ...gameItems, 
         cpu:{...gameItems.cpu, score: gameItems.cpu.score + 1}
      })

 return (
        <GameContext.Provider value={{gameItems, setChoices}}>
            { props.children }
        </GameContext.Provider>
    )
}
//choices component
import React, { useContext } from 'react';
import { GameContext } from '../contexts/GameContext';
const Choices = (props) => {
    const {  setChoices } = useContext(GameContext);
    const getCpuChoice = () => {
        const cpuChoices = ['r', 'p', 's'];
        const randomIndex = Math.floor((Math.random() * 3));
        const cpuDecision = cpuChoices[randomIndex];
        return cpuDecision
    }
    const playGame = (e) => {
        const userChoice = e.target.id;
        const cpuChoice = getCpuChoice();
        setChoices(userChoice, cpuChoice);
        cpuScore();
    } 
    return (
            <div>
                <h1>Make Your Selection</h1>
                <div className="choices">
                    <i className="choice fas fa-hand-paper fa-10x" id="p" onClick={playGame}></i>
                    <i className="choice fas fa-hand-rock fa-10x" id="r" onClick={playGame}></i>
                    <i className="choice fas fa-hand-scissors fa-10x" id='s' onClick={playGame}></i>
                </div>
            </div>
        )
    }

我希望用户和CPU的选择属性每次调用SETCHOICES时都可以更新。我更新状态的方式有什么问题吗？

Answer 1

我做了一些设置来模拟https://codesandbox.io/s/festive-almeida-4zx3c

可能会导致并非总是更新的印象是有时您会因为randomIndex

而获得相同的值

如果值输出与上一个相同，则不会更新。它会认为国家没有改变。

解决方案：

是否有力更新：我如何强制组件在React中使用钩子重新呈现？

或向状态添加内部价值，总是会改变的东西，例如哈希。

Answer 2

阅读：https://www.freecodecamp.org/news/get-pro-with-with-react-setstate-in-10-minutes-d38251d1c781/

对象的浅比较会导致这种行为。