reactjs - React 初学者 - React 组件在状态更新后无法正确重新渲染

Question

我是一个 React 初学者，我正在尝试在浏览器中创建一个小游戏，其中显示一个数字数组，并且用户必须从多项选择中正确选择所有数字的总和。我有一个通过 onClick 回调启动游戏的按钮，如下所示。

    const [sequence, setSequence] = useState([]);
    const [sum, setSum] = useState(0)
    const [countdown, setCountdown] = useState(10);
    const [multipleChoice, setMultipleChoice] = useState([]);

    const createSequence = () => {
        let newSequence = []
        for (let i = 0; i < 6; i++) {
            newSequence.push(Math.floor(Math.random() * 9) + 1);
        }
        setSequence(newSequence);
    }

    const createRandomAnswers = () => {
        let multipleChoiceArray = someRandomArrayFunction();
        setMultipleChoice(multipleChoiceArray);
    }

    const calculateSum = () => {
        // calculates sum of current number sequence and updates sum state
        let total = 0;
        for (var i in sequence) {
            total += sequence[i];
        }
        setSum(total);
    }

    const createGame = () => {
        createSequence();
        console.log("calculating sum")
        calculateSum();
        createRandomAnswers();
    }

    return (
        <>
            <p> {sum}</p>
            <h2>{sequence}</h2>
            <button onClick={createGame}>Start Game</button>
            <Choice value={multipleChoice[0]} />
            <Choice value={multipleChoice[1]} />
            <Choice value={multipleChoice[2]} />
        </>
    );

这三个函数各自使用状态 Hook 更新状态变量。但是，每个正确值并不同步。

例如，如果我有一个数组序列 [1, 2, 3, 4]，则总和应显示为 10。当调用 createGame 时，序列会更新，但总和直到第二次 createGame 才会更新被调用，此时序列更新为新数字，并且总和设置为 10。

createGame();
// Sequence displayed as [1, 2, 3, 4]
// sum displayed as 0 (initial state)
// multiple choice displayed as blank (initial state)

createGame();
// Sequence updates to random, e.g. [3, 1, 3, 2]
// sum displayed as 10 (sum from previous sequence)
// multiple choice displayed as blank (initial state)

当这些值都在 createGame 中调用时，为什么它们会滞后并一次更新一个？我知道我可能误解了一些核心 React 原则，但任何帮助将不胜感激。

Answer 1

这是因为 useState Hook 是异步工作的，这意味着调用 setState 函数后不会立即发生更改。如果您希望在状态“total”更改后立即发生某些操作“A”，那么您可以使用 useEffect 并为其添加依赖项，以便当 XYZ 更改(在您的情况下为总计)时，setSum(value)。 将“total”设置为状态变量并进行以下更改:

const [total, setTotal] = useState(0)

const calculateSum = () => {
    // calculates sum of current number sequence and updates sum state
    let total = 0;
    for (var i in sequence) {
        total += sequence[i];
    }
    setTotal(total);
}


 useEffect(() => {
        setSum(total);
         }, [total]);