时间戳

首页 > 解决方案 > 在 React 中向用户呈现任何内容之前，如何从 API 或 Firebase 检索数据？

javascript - 在 React 中向用户呈现任何内容之前，如何从 API 或 Firebase 检索数据？

问题描述

我想从 Firebase 检索数据，然后将其更新为 redux 并将其呈现给用户。我们可以有条件渲染App.js吗？

如果在（组件）中检索数据HomePage.js并将其更新为 redux 并显示它。然后当用户导航到另一个页面Orders.js或者MyProfile.js我从 redux 获取数据时使用useSelector并显示它。但是，如果用户访问 aOrders.js或MyProfile.jsfirst ，则由于用户没有访问，因此尚未检索到数据HomePage.js。

我现在可以在 App.js 中检索数据并使用条件渲染通过渲染加载屏幕来阻止用户查看其他屏幕。这是一个好习惯吗？

如何在向用户呈现任何内容之前为所有页面普遍获取数据？希望我把问题说清楚了。

标签： javascriptreactjsfirebasereact-redux

解决方案

通常，最好的做法是不管数据是否准备好都加载页面。但是，如果数据尚未准备好，请显示skeleton类似于以下内容的页面： 在此处输入图像描述

然后在useEffect钩子中获取数据并setState在收到数据后执行一次。之后，显示预期的组件。

例如

const Videos = () => {
  const [videos, setVideos] = useState(new Array(5));
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/videos')
      .then(response => response.json())
      .then(videos => setVideos(videos))
      .finally(() => setLoading(false))
  }, []);

  return (
    <Container>
      {videos.map(video => loading
        ? <Skeleton />
        : <Video video={video} />
      )}
    </Container>
  );
};

注意，即将到来的并发模式（还没有 ETA，但已经讨论了很长时间）。这种做法将发生巨大变化。

推荐阅读