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

Question

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

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

Answer 1

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

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