React：在`componentDidMount`之后获取数据

Question

我有一个关于React数据获取的良好实践的一般性问题。

通常，我阅读的所有教程都建议在componentDidMount中获取数据。所以我的生命周期看起来像这样

render
componentDidMount
    fetch ... setState
render

现在，我有一些按钮，单击这些按钮应该可以获取更多数据。但是componentDidMount将不再被调用。那么在fetch被调用之后再次调用componentDidMount的最佳实践是什么？

Answer 1

您不必将fecth呼叫放入componentDidMount中。您可以将抓取操作放在componentDidMount之外的函数中，然后在componentDidMount中调用它，然后在执行任何按钮操作后再次调用它。

componentDidMount() {
    this.fetchApi();
  }
fetchApi = () => {
   //call fetch
}

Answer 2

ComponentDidMount在组件生命周期中仅工作一次-在安装组件时首次渲染之后。据我了解，您需要通过单击按钮来获取更多数据，因此需要这样的内容：

async loadData() {
   const processedResponse = await fetchAsyncFunction()
   this.setState ({yourStateParam: processedResponse })

...

render(){
   return(
      <button onClick={this.loadData}
   )
}