React页面刷新时存在数据却先显示空数组警告该如何解决

• 你的favourites初始状态是空数组，而接口请求是异步操作，页面首次渲染时请求还没返回结果，此时favourites.length === 0的判断就会触发空数据提示，等请求完成更新状态后才会重新渲染列表，所以会出现先闪空提示再出内容的问题。

第一步：新增加载状态区分请求过程和真实空数据 #

新增loading状态标记接口请求是否完成，避免把请求过程中的空数组当成真实无数据场景：

// 原来的favourites状态不变，新增加载状态
const [favourites, setFavourites] = useState([]);
const [loading, setLoading] = useState(true);

第二步：调整数据请求方法更新加载状态 #

在请求开始和结束时修改loading状态：

const retrieveFavourites = () => {
  setLoading(true);
  TutorialDataService.getAllFav()
    .then((response) => {
      setFavourites(response.data);
      console.log(response.data);
    })
    .catch((e) => {
      console.log(e);
    })
    .finally(() => {
      // 无论请求成功失败，都结束加载状态
      setLoading(false);
    });
};

第三步：修改渲染判断逻辑 #

优先判断加载状态，加载完成后再判断是否为空：

{
  // 加载中展示加载提示，可替换为加载动画
  loading ? (
    <p>加载中...</p>
  ) : favourites.length === 0 ? (
    <p>belum ada yang ditambah</p>
  ) : (
    favourites.map((favourite, index) => (
      <div
        className="col-md-3"
        key={index}
      >
        <div
          className="card"
          style={{
            border: "2px solid",
            borderColor: index === currentIndex ? "red" : null,
          }}
        >
          <img
            src={favourite.image.url}
            alt={favourite.image.id}
            className="card-img-top"
            width="100"
            height="300"
          />
        </div>
      </div>
    ))
  )
}

可选优化：删除功能取消页面刷新 #

原来的删除逻辑用window.location.reload()会刷新整个页面，体验不好，可以直接重新拉取收藏列表实现局部更新：

const deleteCats = () => {
  TutorialDataService.remove(currentFavourite.id)
    .then((response) => {
      console.log(response.data);
      alert("selesai unfavourite");
      // 重新拉取列表代替页面刷新
      retrieveFavourites();
    })
    .catch((e) => {
      console.log(e);
    });
};

注意：React中元素的类名属性要写className而不是class，否则会出现语法警告。

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