如何确保API调用在React组件初始呈现之前先接收数据？

Question

该应用是单页应用，由于其呈现未定义变量，因此初始呈现抛出错误。

我的最佳猜测是在getDerivedStateFromProps（props，state）中调用API调用，但是文档说：“如果您需要执行副作用（例如，获取数据或动画）以响应props的更改，请使用改为componentDidUpdate生命周期。”

Answer 1

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

• 在组件状态中设置变量“ isLoading”，其初始值为true。
• 如果仅调用一次api，请在异步ComponentDidMount中进行，一旦api调用完成，请将isLoading设置为false
• 在渲染中检查变量。如果为true，则显示微调框或“正在加载”消息。如果为假，则显示组件中所需的内容
• 如果api被定期调用或在事件发生时被调用，则在每次调用api时将状态变量设置为false，并在完成后将其清除