React函数组件中如何等待多个useState的setState执行完成后执行函数？

在React函数组件的某个函数中，我可能会更新多个状态变量。如何确保所有状态变更完成后再运行下一个函数？

例如，假设calculateScore()会在某个事件（比如游戏中的点击）触发时，增加a、b或两者的数值。我希望运行determineWinner()，但要确保setA和setB这两个异步操作都已完成，使得a和b都处于最新状态（在单次calculateScore()调用后）？

我在官方文档及StackOverflow中未找到相关解决方案。

示例代码：

function MyComponent() {
    let [a, setA] = useState(0);
    let [b, setB] = useState(0);
    let [winnerText, setWinnerText] = useState("")

    function determineWinner() {
        if (a > b) {
            // Note, I don't want this to happen if the score ends up equal after both setA and setB from calculateScore() completes.
            setWinnerText("A won!")
        }
    }

    function calculateScore(aShouldIncrease, bShouldIncrease) {
        if (aShouldIncrease) setA(prevA => prevA + 1);
        if (bShouldIncrease) setB(prevB => prevB + 1);

        determineWinner(); // Doesn't work to run it here, since setA and setB are asynchronous.
    }

    useEffect(() => {
        determineWinner(); // Not guaranteed to work here, since perhaps only setA has completed so far and not setB? Right?
    }, [a, b])

    determineWinner(); // Even if we imagined I had some other condition to prevent it from being run prematurely, it may run when only a or only b has changed, right?

    return <h1>{ winnerText }</h1>
}

我知道可以在calculateScore中先完成所有计算再更新状态，但想了解React中是否存在某个时机，能确保单次函数调用中启动的所有setState都已执行完成。

解决方案 #

1. 利用批量更新+useEffect监听依赖 #

首先明确：在React合成事件（如点击、输入）或useEffect内部调用setState时，React会自动做批量更新——也就是你在calculateScore里连续调用setA和setB，React会把这两个状态变更合并成一次重渲染，而非两次。

你之前写的useEffect其实完全有效：当a或b变化时，useEffect会在重渲染完成后执行，此时a和b已经是最新状态值。哪怕单次calculateScore同时更新了a和b，useEffect也只会触发一次，调用determineWinner时拿到的就是最终的最新分数，不存在“只有一个状态更新完成”的情况。

2. 提前计算最新值，同步判断 #

如果不想依赖useEffect，可以在calculateScore里先算出a和b的最新值，直接基于这些值判断胜负，不用等状态更新：

function calculateScore(aShouldIncrease, bShouldIncrease) {
    const newA = aShouldIncrease ? a + 1 : a;
    const newB = bShouldIncrease ? b + 1 : b;

    setA(newA);
    setB(newB);
    // 直接用计算好的最新值判断，无需等待状态更新
    determineWinner(newA, newB);
}

function determineWinner(currentA, currentB) {
    if (currentA > currentB) {
        setWinnerText("A won!");
    } else if (currentB > currentA) {
        setWinnerText("B won!");
    } else {
        setWinnerText("Draw!");
    }
}

3. 合并相关状态变量 #

如果a和b是强关联的（比如游戏的两个玩家分数），可以把它们合并成一个状态对象，一次setState完成更新，后续判断更简洁：

function MyComponent() {
    const [scores, setScores] = useState({ a: 0, b: 0 });
    const [winnerText, setWinnerText] = useState("");

    function determineWinner() {
        const { a, b } = scores;
        if (a > b) {
            setWinnerText("A won!");
        } else if (b > a) {
            setWinnerText("B won!");
        } else {
            setWinnerText("Draw!");
        }
    }

    function calculateScore(aShouldIncrease, bShouldIncrease) {
        setScores(prev => ({
            a: aShouldIncrease ? prev.a + 1 : prev.a,
            b: bShouldIncrease ? prev.b + 1 : prev.b
        }));
    }

    useEffect(() => {
        determineWinner();
    }, [scores]);

    return <h1>{winnerText}</h1>;
}

关于“单次调用中所有setState完成的时机” #

React函数组件没有直接的API监听“本次函数调用中所有setState完成”的事件，但利用批量更新特性+useEffect监听状态，就能实现需求——批量更新会把同一事件循环内的所有setState合并，重渲染完成后useEffect执行，此时所有状态都已更新完毕。

注意：在非合成事件（如setTimeout、原生DOM事件回调）中，React默认不批量更新，若需要可使用ReactDOM.unstable_batchedUpdates包裹状态更新代码，但该API不稳定，生产环境需谨慎使用。

内容的提问来源于stack exchange，提问作者Ylor