javascript - 请问在 react 中如何实时更新状态？

Question

请教下 useState 更新的问题，有一个页面，当数据库中没有数据的时候，显示 No user，当数据库中有数据的时候，显示出真实的数据，代码如下

const [users, setUsers] = useState([]);useEffect(() => {  const fetchData = async () => {    try {      const response = await fetch(`${apiUrl}/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);    }  };  fetchData();}, [token]);const userList = () => {  const activedUsers = users  .filter((user) => user.status === 1);  if (activedUsers.length === 0) {    return(      <>      {activedUsers.length === 0 &&        <div>No user</div>      }      </>    )  }  return (    <>      {activedUsers.map((user) => (        <div key={user.userID}>          <Link to={`/user/${user.userID}`}>{user.Name}</Link>        </div>      ))}    </>  )}

现在我遇到的问题是

1. 每次访问这个页面 /users，都会显示 No user，然后过一会数据完全载入了才会显示正确的数据。查看了下，这里会渲染两次，第一次渲染 activedUsers.length 是 0，第二次渲染才会正确的载入数据。
2. 点击任意一个用户名字后，会跳到用户的详情页面，再次访问 /users，会显示刚刚访问的这个用户的用户名，然后过一会才会自动刷新出正确的数据。

请问这个问题怎么解决，希望每次进入都是显示正确的数据。

Answer 1

异步导致你不能第一时间拿到最新的 userinfo，最简单的方法加个 loading

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 (    // ...用户列表渲染代码保持不变  );};