将异步数据加载到 React 组件中

IT技术 reactjs asynchronous async-await
2021-05-24 06:29:18

我需要将外部数据异步加载到我的 React 组件中。此处的文档提供了以下代码示例。

// After
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentDidMount() {
    this._asyncRequest = loadMyAsyncData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

但是,如何loadMyAsyncData()使它“可以”呢?我想它可能会用async/await

有人可以提供一个例子吗?

1个回答

要成为“thenableloadMyAsyncData应该返回一个Promise.

这是一个示例 loadMyAsyncData 返回一个Promise并setTimeout用于在 1 秒后延迟解决Promise

const loadMyAsyncData = () => new Promise((resolve, reject) => {
  setTimeout(() => resolve({
    example: "value"
  }), 1000)
})

您可以使用上面的代码this._asyncRequest = loadMyAsyncData().then( ..... )或使用 async/await 代替

async componentDidMount() {
  this._asyncRequest = loadMyAsyncData()
  const externalData = await this._asyncRequest;
  this._asyncRequest = null;
  this.setState({externalData});
}

代码沙盒示例