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>
        )
    }

我希望每次调用setChoices时，用户和cpu的choice属性都会更新。我更新状态的方式有问题吗？

Answer 1

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

可能会导致印象不总是更新的是，有时您会因为randomIndex而获得相同的值

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

解决方案：

进行强制更新：How can I force component to re-render with hooks in React?

或者在状态中添加内部值，某些值总是在变化，例如哈希。

Answer 2

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

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

状态并不总是更新

2 个答案: