React中设置函数执行状态显示加载提示遇setState不生效问题

你的代码存在两个关键问题 #

1. 状态变量名不一致：你定义的状态是isLoadingState，但渲染加载提示时判断的是isFetchingState——这直接导致加载提示永远不会根据正确状态显示。
2. 同步阻塞导致状态更新被合并：verySlowFunction是同步耗时函数，React在同一个同步代码块里的状态更新会被批量合并。你先把状态设为true，紧接着又设为false，React最终只会执行最后一次更新；而且同步函数会卡死浏览器渲染线程，就算状态更新了，浏览器也没时间渲染加载提示，直接等到函数跑完才更新UI，所以你根本看不到加载状态。

解决方案 #

方案1：修改verySlowFunction的执行方式（推荐） #

把耗时逻辑放到异步任务中，给React留出渲染加载状态的时间：

const MyComponent = () => { // React组件名必须首字母大写
    const [isLoading, setIsLoading] = useState(false)

    async function verySlowFunction() {
        setIsLoading(true);
        // 用Promise包装同步耗时逻辑，让它变成可await的异步操作
        await new Promise(resolve => {
            // 这里放你原来的所有耗时函数调用
            resolve();
        });
        setIsLoading(false);
    }

    return (
        <>
            <h1>Our component here</h1>
            {isLoading ? <h5>Currently loading...</h5> : null}
        </>
    )
}

如果你的耗时函数完全是同步的、没法用await，可以用setTimeout把它丢到宏任务队列：

function verySlowFunction() {
    setIsLoading(true);
    setTimeout(() => {
        // 原有的耗时函数调用
        setIsLoading(false);
    }, 0);
}

方案2：不修改verySlowFunction的实现 #

如果你不能改动这个函数本身，可以在调用它的时候做一层封装，先触发加载状态，再让浏览器先渲染UI，最后执行耗时函数：

const MyComponent = () => {
    const [isLoading, setIsLoading] = useState(false)

    // 假设这个函数是外部提供、无法修改的
    function verySlowFunction() {
        // 原有的耗时逻辑
    }

    // 封装调用逻辑
    const runSlowFunction = () => {
        setIsLoading(true);
        // 让浏览器先完成当前渲染，再执行耗时函数
        setTimeout(() => {
            verySlowFunction();
            setIsLoading(false);
        }, 0);
    }

    return (
        <>
            <h1>Our component here</h1>
            <button onClick={runSlowFunction}>执行耗时操作</button>
            {isLoading ? <h5>Currently loading...</h5> : null}
        </>
    )
}

另外提醒：React要求组件名必须首字母大写，你的myComponent要改成MyComponent，否则React会把它当成普通HTML标签处理，这也是容易忽略的细节。

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