reactjs - 我应该什么时候在反应的更新生命周期中获取数据？

Question

例如，我想在单击按钮时获取数据。我应该把我的 fetch 函数放在哪里，我通常把我的 fetch 函数放在处理函数中。

// in my component
async handleButton(){
    if(!this.state.data){
        let data = await fetchFunction();
        this.setState({
          state_data : data    
        });
    }
}

render(){
    <button onClick={this.handleButton}>fetch data</button>
}

但在反应中，lifeCycle 提供 componentDidUpdate 来获取数据。下面是描述 componentDidUpdate 的反应文档中的内容。

这也是进行网络请求的好地方，只要您将当前的 props 与以前的 props 进行比较（例如，如果 props 没有更改，则可能不需要网络请求）。

而且我认为那个文档意味着我应该这样写？

// in my component
handleButton(){
    if(!this.state.data){
       this.setState({
         need_fetch_data : true    
       });
    }
}
async componentDidUpdate(){
   if(this.state.need_fetch_data && !this.state.data){
      let tmp = await fetchFunction();
      this.setState({
          data : tmp;
      })
   }
}

render(){
    <button onClick={this.handleButton}>fetch data</button>
}

而且我认为第二种方法会比第一种方法多渲染一次。所以不行。

感谢您的任何回答！

标签： reactjsfetch