reactjs - React Beginner - 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]} />
        </>
    );

这三个函数都使用状态钩子更新状态变量。但是，每个正确值都不同步。

例如，如果我有一个数组序列 [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 原则，但我们将不胜感激。

标签： reactjsreact-hooks