React获取数据前不重渲染页面，如何立即显示加载组件？

你的代码存在两个核心问题，导致Loading组件无法立即显示：

1. 重复设置无变化的状态：初始isLoading已经是true，首次渲染会显示Loading，但useEffect里调用setIsLoading(() => true)时，状态值未发生改变，React不会触发重渲染。
2. 状态更新批量处理（React 18+）：当依赖项（itemLists/id）变化时，useEffect执行后，若getData的Promise快速完成（比如读取缓存数据），setIsLoading(false)会和之前的setIsLoading(true)被批量合并处理，最终状态直接变为false，跳过Loading的渲染流程。

方案1：拆分状态触发与数据获取逻辑 #

通过两个useEffect分离状态更新和异步操作，确保Loading先渲染再执行数据获取：

const [isLoading, setIsLoading] = React.useState(false);

// 监听依赖变化，触发加载状态
useEffect(() => {
  setIsLoading(true);
}, [itemLists, id]);

// 加载状态激活时，执行数据获取
useEffect(() => {
  if (!isLoading) return;

  const fetchData = async () => {
    try {
      const selectedItem = itemLists[id];
      await getData(selectedItem);
      setIsLoading(false);
    } catch (err) {
      console.log(err);
      setIsLoading(false); // 出错后需关闭加载状态，避免卡死
    }
  };

  fetchData();
}, [isLoading, itemLists, id]);

方案2：延迟数据获取到下一个执行周期 #

利用setTimeout将数据获取逻辑放到状态更新后的下一个宏任务，确保Loading优先渲染：

const [isLoading, setIsLoading] = React.useState(true);

useEffect(() => {
  setIsLoading(true);
  
  setTimeout(() => {
    const selectedItem = itemLists[id];
    getData(selectedItem)
      .then(() => setIsLoading(false))
      .catch(err => {
        console.log(err);
        setIsLoading(false);
      });
  }, 0);
}, [itemLists, id]);

修复JSX语法错误 #

你的返回代码存在两处语法问题，需修正：

return (
  <>
    {isLoading ? (
      <Loading />
    ) : (
      <h1>page content here</h1> {/* 闭合标签应为</h1> */}
    )}
  </> {/* 闭合标签应为</> */}
);

额外优化提示 #

• 初始状态可按需调整：若页面首次加载需要显示Loading，保持useState(true)；若无需首次加载，设为false。
• 异常场景务必关闭加载状态，避免用户长时间看到Loading组件。

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