时间戳

首页 > 解决方案 > 如何确保 API 调用在响应组件初始渲染之前接收数据？

reactjs - 如何确保 API 调用在响应组件初始渲染之前接收数据？

问题描述

该应用程序是单页应用程序，初始渲染由于其渲染未定义变量而引发错误。

我最好的猜测是在 getDerivedStateFromProps(props, state) 中调用 API 调用，但文档说“如果您需要执行副作用（例如，数据获取或动画）以响应道具的变化，请改用 componentDidUpdate 生命周期。”

标签： reactjs

解决方案

我一直使用的解决方案是：

  • 在您的组件状态中设置一个初始值为 true 的变量“isLoading”。
  • 如果您只调用一次 api，请在您的异步 ComponentDidMount 中执行，一旦 api 调用完成，将 isLoading 设置为 false
  • 在渲染中检查变量。如果为 true，则显示微调器或“正在加载”消息。如果 false 在组件中显示您需要的任何内容
  • 如果 api 被定期或在事件中调用，每次调用 api 时将 state 变量设置为 false 并在完成时将其清除

推荐阅读