改变状态后无限循环

Question

我已经创建了组件，该组件将更改其状态的函数传递给子组件。

//parent component
setSubject = (id) => {
    this.setState({
        currentSubject: id
    });
}

<Subjects authToken = {this.state.authToken} subjects = {this.state.subjects} setSubject = {this.setSubject} />

//child component
<li onClick={() => this.props.setSubject(subject.id)}>Egzamino programa</li>

该状态被传递给另一个组件。

 <Sections authToken = {this.state.authToken} subject = {this.state.currentSubject} />

从那里我使用 componentDidUpdate() 方法来处理这个变化：

componentDidUpdate() {
    if (this.props.subject) {            
        axios.get(`http://localhost:3000/api/subjects/${this.props.subject}/sections?access_token=${this.props.authToken}`)
            .then(response => {
                this.setState({
                    sections: response.data
                })
            }).catch(err => {
                console.log(err)
            })
    }
}

一切都按预期工作，但是当我通过 Subjects 组件设置 currentSubject 后尝试在 Sections 组件中 console.log 时，console.log 执行无数次（我猜是 get 请求...... ) 这不是很好，是吗？而且我无法理解为什么会发生这种情况..

Answer 1

错误在您的componentDidUpdate 方法中。

您正在使用

更新状态

   this.setState({ 
     sections: response.data
   })

当你这样做时，componentDidUpdate 生命周期方法将被调用并且你有无限循环。

您可以通过使用锁来快速修复以避免此问题。但是可能有更好的设计来解决您的问题。

快速修复示例：

if (this.props.subject && !this.state.sectionsRequested) {
  this.setState({
    sectionsRequested: true,
  });
  axios.get(`http://localhost:3000/api/subjects/${this.props.subject}/sections?access_token=${this.props.authToken}`)
    .then(response => {
      this.setState({
        sections: response.data,
      });
    })
    .catch(err => {
      console.log(err);
    });
}

对于您的情况，最好使用componentWillReceiveProps。 您有兴趣根据您的 this.props.subject 值获取数据。我可以看到，因为您将它用作 url 查询的一部分。

您可能有兴趣使用componentWillReceiveProps 和componentDidMount 而不是componentDidUpdate

componentDidMount(){
  if(this.props.subject){
    /* code from componentDidUpdate */
  }
}

componentWillReceiveProps(nextProps){
  if(nextProps.subject && this.props.subject !== nextProps.subject){
    /* code from componentDidUpdate */
  }
}