反应ComponentDidUpdate上的无限循环

时间:2020-07-14 03:24:08

标签: reactjs

我有一个称为事件的模型,在更新事件后,当我尝试使用componentDidUpdate更新对视图的更改时,它将永远循环(无限循环)。我搜索并看到有相同问题的人,但似乎无法正常工作。

这是我在EventComments组件中的componentDidUpdate

componentDidUpdate() {
  axios
  .get(
    "http://localhost:9000/events/" +
      this.props.match.params.id +
      "/eventcomments"
  )
  .then((response) => {
    this.setState({ event: response.data });
    this.setState({ eventcomments: response.data.eventcomments });
  })
  .catch(function (error) {
    console.log(error);
  });
}

请问该怎么做才能使此无限循环停止?

2 个答案:

答案 0 :(得分:0)

您需要将事件包装成条件条件。来自文档的参考:

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

您的示例:

componentDidUpdate(prevProps) {
if(prevProps.id !== this.props.match.params.id){
  axios
  .get(
    "http://localhost:9000/events/" +
      this.props.match.params.id +
      "/eventcomments"
  )
  .then((response) => {
    this.setState({ event: response.data });
    this.setState({ eventcomments: response.data.eventcomments });
  })
  .catch(function (error) {
    console.log(error);
  });
}
}

答案 1 :(得分:0)

经过多次尝试,我设法使它起作用。但是,如果您知道比这更好的方法,请告诉我。

这是我所做的

componentDidUpdate(prevProps, prevState) {
if (prevState.event === this.state.event) {
  axios
    .get(
      "http://localhost:9000/events/" +
        this.props.match.params.id +
        "/eventcomments"
    )
    .then((response) => {
      this.setState({ event: response.data });
    })
    .catch(function (error) {
      console.log(error);
    });
  }
}