React组件条件渲染异常：异步更新后Loading组件未切换

问题根源 #

1. 普通变量无法触发组件重渲染：你声明的data是普通数组，并非React状态变量。修改普通变量不会通知React更新组件，所以即便data被修改，组件也不会重新渲染，isEmpty状态自然不会变化。
2. 状态更新时机错误：useEffect里的isEmpty判断逻辑是在setTimeout外部同步执行的，此时data还是空数组，isEmpty被设为true后，后续setTimeout里修改data的操作不会触发任何状态更新，组件始终停留在初始的Loading状态。

修复后的代码（方案一：保留isEmpty状态） #

import { useState, useEffect } from 'react';

export default function App() {
  const [isEmpty, setIsEmpty] = useState(true);
  // 将data转为React状态变量
  const [data, setData] = useState([]);
  
  useEffect(() => {
    setTimeout(() => {
      // 用函数式更新确保基于最新状态修改数组
      setData(prevData => [...prevData, 'newvalue']);
    }, 3000);
  }, []);

  // 监听data变化，自动同步isEmpty状态
  useEffect(() => {
    setIsEmpty(data.length === 0);
  }, [data]);

  return (
    <>
      {isEmpty ? <h1>Loading...</h1> : <h1>Data Available</h1>}
    </>
  );
}

更简洁的修复方案（方案二：移除单独的isEmpty状态） #

可以直接在渲染时判断data长度，省去维护isEmpty状态的成本：

import { useState, useEffect } from 'react';

export default function App() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    setTimeout(() => {
      setData(prevData => [...prevData, 'newvalue']);
    }, 3000);
  }, []);

  return (
    <>
      {data.length === 0 ? <h1>Loading...</h1> : <h1>Data Available</h1>}
    </>
  );
}

关键修改说明 #

• 将普通数组data改为React状态变量，通过setData修改数组时会触发组件重渲染。
• 使用函数式更新setData(prevData => [...prevData, 'newvalue'])，避免闭包导致的状态更新不准确问题。
• 方案一中新增的useEffect会在data变化时自动更新isEmpty状态，确保渲染内容与数组状态同步。

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