如何同步渲染React函数式组件UI：先渲染Loading再渲染Home

你的代码存在两个关键问题，导致Loading组件无法切换到Home组件：

• 在useEffect中定义了异步函数但未调用，整个异步逻辑完全没执行
• Promise的resolve参数使用错误，你把setBeforeLoad(true)作为函数传给resolve，但await后不会自动执行该函数，应该直接在setTimeout里触发状态更新

以下是修正后的完整代码：

import React, { useEffect, useState } from "react";
import Home from "./Home";
import Loading from "./Loading";

export default function Web() {
  const [beforeLoad, setBeforeLoad] = useState(false);

  useEffect(() => {
    // 定义并立即执行异步函数
    const switchToHome = async () => {
      await new Promise(resolve => {
        setTimeout(() => {
          // 直接在这里更新状态，无需通过resolve传递
          setBeforeLoad(true);
          resolve();
        }, 2500);
      });
    };

    switchToHome();
  }, []);

  if (!beforeLoad) {
    return (
      <div className="bg-gradient-to-r from-violet-500 to-fuchsia-500" style={{
        width: '100vw', // 修正单位：将100wh改为正确的视窗宽度单位100vw
        height: '100vh',
        padding: 0,
        margin: 0,
        overflow: 'hidden',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        perspective: '500px'
      }}>
        <Loading />
      </div>
    );
  }
  // 简化条件判断，直接返回Home组件
  return <Home />;
}

额外优化说明：

• 修正了视窗宽度单位错误：100wh改为标准的100vw
• 简化了条件分支逻辑，去掉冗余的else if(beforeLoad)

如果你的Loading组件本身包含异步加载逻辑（比如加载资源、接口请求），而非单纯定时切换，可以把定时器替换为Loading组件的完成回调，示例如下：

// 假设Loading组件支持onComplete回调，在自身加载完成时触发
<Loading onComplete={() => setBeforeLoad(true)} />

这样就能实现Loading组件真正完成渲染/加载后，再切换到Home组件的需求。

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