react类组件中如何使用必须先完成的异步功能答案

【问题标题】：How to use an asynchronous function that must be completed first in a react class componentreact类组件中如何使用必须先完成的异步功能
【发布时间】：2021-09-01 02:05:55
【问题描述】：

我想在 react 类组件中做一个异步函数，必须先完成。

我不想使用像componentDidMount这样的生命周期，所以我使用了这样的顶级等待：

let data;

(async () => {
  data = await asyncRequest();
})();

class Test extends React.Component {
  render() {
    return <h1>Hello, {data}</h1>;
  }
}

然而，在上面的代码中，即使使用了顶级等待，如果经过一定的时间，渲染在异步操作结束之前继续进行。

我该如何解决这个问题？

【问题讨论】：

为什么不想使用生命周期方法？他们是来解决这样的问题的。
异步函数和渲染函数同步运行。只有异步函数内部的代码才会异步运行。

标签： javascript reactjs typescript

【解决方案1】：

问题似乎是您创建的异步函数。你必须对它使用 then 块

let data;

(async () => {
  data = await asyncRequest();
  return data;
})();

class Test extends React.Component {
  render().then(function(res, err) {
    return <h1>Hello, {data}</h1>;
  });
}

【讨论】：

【解决方案2】：

我建议你初始化一个布尔变量，你可以用默认值 true 调用 isLoading。异步函数完成后，将 isLoading 更改为 false。

在你的渲染函数中你可以这样写：

if(isLoading) {
  return <h1>Loading...</h1>
} else {
  return <h1>Hello, {data}</h1>;
}

当我可以使用生命周期时，我通常会使用此方法，但我不明白为什么它不起作用

【讨论】：