如何解决React异步请求时页面先闪No user再加载的问题？

问题场景 #

页面逻辑为：数据库无数据时显示"No user"，有数据时展示真实用户列表，但首次进入或刷新页面时，会先快速闪过"No user"，再显示"Loading..."，最后才展示真实用户数据。期望流程是先显示加载状态，再根据数据情况展示用户列表或"No user"。

问题原因 #

1. 初始状态isLoading设为false，组件首次渲染时直接跳过Loading判断，进入用户数据逻辑
2. users初始值是空数组，过滤后的activedUsers长度为0，所以首次渲染直接显示了"No user"
3. 随后useEffect才执行，将isLoading设为true，组件重新渲染显示Loading，这就造成了闪烁现象

解决步骤 #

1. 将isLoading的初始值改为true，让组件首次渲染就进入加载状态
2. 清理userList里冗余的重复判断，简化逻辑

修改后的完整代码 #

const [users, setUsers] = useState([]);
// 将isLoading初始值设为true，首次渲染直接显示加载
const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch(`/users`, {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${token}`,
        }
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          setUsers(data.users);
        }
      } else {
        console.log('Other HTTP Error:', response.status);
      }
    } catch (error) {
      console.error('Error fetching users:', error);
    } finally {
      setIsLoading(false);
    }
  };

  fetchData();
}, [token]);


const userList = () => {
  // 加载状态优先展示
  if (isLoading) {
    return <div>Loading...</div>;
  }

  const activedUsers = users.filter((user) => user.status === 1);

  // 无激活用户时显示提示
  if (activedUsers.length === 0) {
    return <div>No user</div>;
  }

  // 有数据时渲染用户列表
  return (
    <>
      {activedUsers.map((user) => (
        <div key={user.userID}>
          <Link to={`/user/${user.userID}`}>{user.Name}</Link>
        </div>
      ))}
    </>
  )
}

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