React JS首次渲染无内容热更新后才显示 分页相关问题排查

• 核心原因是React状态更新的异步特性：你在fetchUserReviews方法中调用setReviews(item)后立刻执行setUsers(reviews.slice(0, 50))，此时reviews状态还未完成更新，还是初始的空数组，导致users被赋值为空数组，分页切片后自然没有内容渲染。热重载时组件会复用已经更新过的状态值，所以内容可以正常显示。
• 你注释了全局loading判断逻辑，初始加载阶段没有做接口请求未完成的兜底渲染占位，同时currentUser如果是从AuthContext异步获取的，首次渲染时可能还未完成初始化，也可能导致接口请求参数异常，进一步影响数据获取。
• useEffect依赖数组为空，若currentUser加载晚于组件首次渲染，会出现fetchUserReviews调用时currentUser.email抛出异常，数据无法正常获取。
• loading初始值错误定义为数组[true]，不符合布尔类型的使用规范。

1. 修正fetchUserReviews中状态赋值逻辑，直接用接口返回的item数组给users赋值，不要依赖还未完成更新的reviews状态。
2. 恢复loading状态判断逻辑，在数据未加载完成时显示loading占位，避免空白。
3. 给useEffect添加currentUser依赖，并且添加currentUser存在性判断，避免空值报错。
4. 修正loading初始值修正为布尔类型。

// 修正loading初始值
const [loading, setLoading] = useState(true);

// 修正useEffect依赖和判断逻辑
useEffect(() => {
  if (currentUser) {
    fetchUserDetails();
    fetchUserReviews();
  }
}, [currentUser]);

// 修正fetchUserReviews的状态赋值逻辑
const fetchUserReviews = () => {
  fire
    .firestore()
    .collection("VendorReviews")
    .where("useremail", "==", currentUser.email)
    .get()
    .then((querySnapshot) => {
      const item = [];
      querySnapshot.forEach((doc) => {
        item.push(doc.data());
      });
      setReviews(item);
      // 直接使用接口返回的数组赋值，不依赖未更新的reviews状态
      setUsers(item.slice(0, 50));
      setLoading(false);
    });
};

// 恢复loading判断逻辑，放在return之前
if (loading) {
  return <div className="App">Loading...</div>;
}

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