渲染前在 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.
  });
}

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

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