Question

在我的componentWillMount函数中，我有一个asycn函数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.
  });
}

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

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

Answer 2

用于异步渲染组件的惯用React。您将获取数据，并相应地设置您的状态...使用新状态，您的组件将重新渲染。通常的做法是使用微调器渲染组件，并在设置状态时，使用实际数据重新渲染。至少，您可以呈现null，直到您的异步请求完成并设置您的状态。

Answer 3

  在安装发生之前调用
componentWillMount（）。它是   在render（）之前调用，因此同步调用setState（）   此方法不会触发额外渲染。一般来说，我们   建议改用构造函数（）。

避免在此方法中引入任何副作用或订阅。   对于这些用例，请改用componentDidMount（）。

这是在服务器渲染上调用的唯一生命周期钩子。

source

您可以使用componentDidMount()并使渲染成为条件并等待API的结果，然后使用结果进行渲染。

ReactJS：在呈现之前获取Async ComponentDidMount上的数据

3 个答案: