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

【问题标题】：How to retrieve a data from API or Firebase before rendering anything to the user in React?在 React 中向用户呈现任何内容之前，如何从 API 或 Firebase 检索数据？
【发布时间】：2021-08-06 08:41:38
【问题描述】：

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

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

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

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

【问题讨论】：

您正在描述高阶组件，您应该研究如何为您的目的构建它们。延迟任何输出给用户被认为是一种反模式，并且是数据绑定首先存在的全部原因。

标签： javascript reactjs firebase react-redux

【解决方案1】：

是的，这完全是一个好习惯。因为如果没有任何加载指示，那么用户可能会认为他/她的数据已被删除。如果应用程序需要这些数据以使其对用户来说难以处理，那么等待是必要的。

您可以使用条件渲染，例如... data !== undefined ? renderStuff() : loadingIndicator()

您可以将react-activity 用于动画加载指示器。

您可以在App 等主要组件中获取所有数据，并使用useEffect 挂钩调用服务器获取数据。您可以使用async Actions 调用API。

希望这能回答你的问题。

【讨论】：

【解决方案2】：

通常，最佳做法是无论如何都加载页面，而不管数据是否准备好。但是，如果数据尚未准备好，请显示页面的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，但已经讨论了很长时间）。这种做法将彻底改变。

【讨论】：