如何在反应js中的组件渲染之前进行api调用[关闭]答案

【问题标题】：How to make an api call before component render in react js [closed]如何在反应js中的组件渲染之前进行api调用[关闭]
【发布时间】：2021-09-05 18:56:10
【问题描述】：

  export default function Dashboard(){
      useEffect(() => {
          setTimeout(()=>console.log("API Call Completed"),5000)
      },[])

      return(
          <div>
            <h1>Dashboard</h1>
          </div>
      )
}

我希望在页面上打印仪表板之前（或返回之前）在控制台上打印“API 调用已完成”。但是消息会在控制台上打印 5 秒“仪表板”出现在页面上。我如何做到这一点？

【问题讨论】：

你不能，超时只有在组件被渲染（函数被调用）时开始。您必须添加一些可以在回调中更新的状态，以便它在完成之前呈现 null。
所以不可能达到我的需要？
我觉得这是一个 XY 问题。为什么要延迟组件的渲染？
我需要调度一个 loadUser() 函数并检查是否存在具有令牌（存储在 localStorage 中）的用户，然后将 redux 存储 isAuthenticated 字段设置为 false。所以组件不应该在 isAuthenticated 字段更新之前渲染
不，这并非完全不可能，我在第一条评论中建议了一种处理方法。您不能阻止渲染，但直到稍后才能渲染任何内容。

标签： javascript reactjs api asynchronous use-effect

【解决方案1】：

你不能。

渲染被设计成非阻塞的。

没有办法让它等待异步完成。

一般来说，方法是有一个初始状态，然后从 API 调用的回调中更新状态。

然后，渲染函数可以检测初始状态并渲染加载微调器。

【讨论】：