您的问题与以下问题相同。
如何开发组件,您可以进入循环并无限执行渲染。为了防止这种情况,请增加一种状态和控制,以使请求仅发出1次,或者仅在需要时发出“正念”请求。
另外,您的代码需要进行一些更改,您可以使用State来验证是否显示某些内容,并在发出请求后再次设置State。经过一些更改,您的代码可以如下所示:
state = {
loadingData: true,
post: null
}
render() {
if (!this.state.loadingData) {
return (
<div>
<h3> {this.state.post.postTitle} </h3>
<p> {this.state.post.postBody} </p>
</div>
);
} else {
return <Redirect to="/blog" />
}
}
componentDidMount() {
this._isMounted = true;
if(this.state.loadingData)
axios
.get('https://jsonplaceholder.typicode.com/posts/' + + this.props.postId)
.then((response) => {
this.setState({
loadingData: false,
post: {
id: response.data.id,
postTitle: response.data.title,
postBody: response.data.body
}
})
})
.catch((e) => {
console.log('error', e)
})
}
我希望它有用。问候