我有一个称为事件的模型,在更新事件后,当我尝试使用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);
});
}
请问该怎么做才能使此无限循环停止?
答案 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);
});
}
}