组件试图在react/nextjs中的useEffect和useDispatch之前加载数据

fnx2tebb 于 2023-04-06 发布在 React

关注(0)|答案(1)|浏览(147)

useEffect(() => {
    dispatch(getArticles())
  }, [dispatch])

{blog.articles.map((item) => {
  return <div>{item.name}</div>
})}

如何在加载ui之前等待getArticles()？

1条答案

一种方法是在组件的开头添加一个简单的if语句：

if (!blog.articles || blog.articles.length == 0) 
   return <div>Loading...</div>;

这行代码检查blog.articles数组是否为空或未定义，如果是，则返回一个简单的加载指示符。
然而，这种方法有一个局限性：它只检查blog.articles变量是否存在，但空数组并不一定意味着数据仍在加载。
您可以向组件添加一个加载状态变量，如下所示：

const [isLoading, setIsLoading] = useState(true);

然后使用Promise在useEffect中更新此状态，以等待调度函数完成执行：

useEffect(() => {
  dispatch(getArticles())
    .then(() => {
      setIsLoading(false);
    });
}, [dispatch]);

当然，您可以自定义加载指示器，使其更具视觉吸引力，例如使用微调器或 backbone 加载动画。