在 ReactJS 中更新状态的最佳位置是什么？

Question

目前我正在更新 componentDidUpdate 生命周期函数中的状态。但是由于该功能的性质，我的应用程序正在发送连续的 GET 请求，所以我不确定更新状态的位置，所以我可以避免这种情况。

以下是我的代码。

componentDidUpdate(){
    if(this.props.id){
        if(!this.props.loadedPost || (this.state.loadedPost && this.state.loadedPost.ID !== this.props.id)){
            axios.get('https://public-api.wordpress.com/rest/v1.1/sites/xhehehshs.wordpress.com/posts/'+this.props.id)
            .then( response => {
                this.setState({ loadedPost: response.data });
            });
        }  
    }
}

Answer 1

componentDidMount 是 AJAX 调用的理想位置。它仅在组件安装后立即运行一次，因此您可以通过从那里进行 AJAX 调用来避免您创建的无限循环。

这是一篇很好的文章，解释了所有 React 生命周期钩子以及它们的用途：https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1

Answer 2

componentDidUpdate 是执行 AJAX 调用和更新状态的糟糕位置，因为......每次更新组件时都会调用它（所以像 this.setState({}) 会一遍又一遍地触发它。

componentDidMount 或 componentWillMount 是进行该调用的更好位置，如果您希望它在安装之前或组件安装后立即完成。

编辑：在看到您对另一个答案的评论后，您希望在点击后完成此操作，一旦组件已经安装。因此，这是一个建议的解决方案：

getPosts () {
  if(this.props.id){
        if(!this.props.loadedPost || (this.state.loadedPost && 
  this.state.loadedPost.ID !== this.props.id)){
            axios.get('https://public-
  api.wordpress.com/rest/v1.1/sites/ishhaanpatel.wordpress.com/posts/'+this.props.id)
            .then( response => {
                this.setState({ loadedPost: response.data });
            });
        }  
    }
}

 handleClick (target, value) {
    // do your magic
    this.getPosts() 
 }

在 ReactJS 中更新状态的最佳位置是什么？

What is the best place to update the state in ReactJS?

lifecycle

setstate

reactjs