reactjs - 渲染前在 Async ComponentDidMount 上获取数据

Question

在我的 componentWillMount 函数中，我有一个 async 函数 getResults 从服务器获取数据。我想在初始加载时将来自 getResults 的响应传递给同一组件，但我注意到我的组件在等待数据从 getResults 返回之前呈现。如何让组件在渲染之前等待响应？我正在使用 Redux 来处理我的状态。

async componentWillMount() {
    const response = await getResults(this.props.category)
}

Answer 1

Async/Await 只会让您的代码看起来同步。

async componentWillMount() {
  const response = await getResults(this.props.category)
  this.setState({
    // use response to set your state.
  });
}

设置状态是导致重新渲染的原因。

然后，您可以使用该状态来确定您是否处于加载状态。如果是这样，向用户展示可能会很好。您还想在第一次渲染中处理默认数据。检索到响应后，您将数据设置为第二状态。