如何初始显示Loader，加载完成后按条件展示内容或执行函数？

你的问题根源有两个：

1. display初始状态是undefined，组件挂载后会立刻触发display ? ... : ...的else分支，直接显示提示文字，和Loader重叠显示。
2. Promise逻辑写错了——myResolve直接传入了setTimeout的返回值（定时器ID），导致then里的代码根本没等Loader的2秒倒计时结束就执行了。

修正方案 #

1. 调整状态初始值

把display初始值设为null，让初始状态下既不渲染卡片也不渲染提示，只显示Loader。

2. 修正Promise逻辑

让Promise在Loader倒计时结束后再resolve，确保后续逻辑在Loader关闭后执行。

3. 优化渲染逻辑

Loader显示时不渲染任何其他内容，等Loader关闭后再根据videoIds的长度判断显示卡片还是提示。

完整修正代码 #

const [display, setDisplay] = useState(null); // 初始设为null，不渲染任何内容
const [userMsg, setUserMsg] = useState(true);

useEffect(() => {
  displayFunc();
}, [videoIds]); // 加入videoIds依赖，数组变化时重新执行逻辑

function displayFunc() {
  new Promise((myResolve) => {
    // 等2秒关闭Loader后，再resolve Promise
    setTimeout(() => {
      setUserMsg(false);
      myResolve();
    }, 2000);
  }).then(() => {
    if (videoIds.length === 0) {
      setDisplay(false);
    } else {
      // 如果fetchFunc是异步请求，建议等请求完成后再设置display
      // 示例：fetchFunc().then(() => setDisplay(true))
      fetchFunc();
      setTimeout(() => {
        setDisplay(true);
      }, 2000);
    }
  });
}

return (
  <>
    {userMsg && <Loading />}
    {!userMsg && (
      display ? (
        <ExploreCard videoArray={videoArray} explVidFunc={explVidFunc} />
      ) : (
        <h1>请先在收藏集中添加至少一个视频</h1>
      )
    )}
  </>
);

额外提示 #

• 给useEffect加上videoIds依赖，用户添加/删除收藏视频时，页面会自动重新判断并更新视图。
• 如果fetchFunc是异步API请求，不要用固定的2秒定时器，改成请求完成后再设置display为true，避免卡片内容还没加载完就显示。

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