我收到以下错误(从虚拟服务器收到数据后)
超出最大更新深度。组件时可能会发生这种情况 反复调用componentWillUpdate中的setState或 componentDidUpdate。 React限制嵌套更新的数量 防止无限循环。
这是相关代码
class Blog extends Component {
state = {
posts: [],
selectedPostId: null
}
componentDidMount () {
axios.get("https://jsonplaceholder.typicode.com/posts").then(response => {
const updatedDat = response.data
const updatedData = []
for (let i=0; i<5; i++) {
updatedDat[i].author = "Max";
updatedDat[i].key = i;
updatedData.push(updatedDat[i])
}
this.setState({posts:updatedData})
}, function (error) {
})
}
postClicked = (id) => {
this.setState({selectedPostId: id})
}
render () {
const newPosts = this.state.posts.map(el => {
return <Post key={el.id}
title={el.title}
author={el.author}
clicked={this.postClicked(el.id)}/>
})
return (
<div>
<section className="Posts">
{newPosts}
</section>
<section>
<FullPost display={this.state.selectedPostId}/>
</section>
<section>
<NewPost />
</section>
</div>
);
}
}
export default Blog;
有问题的错误行是
postClicked = (id) => {
> 30 | this.setState({selectedPostId: id})
31 | }
和
clicked={this.postClicked(el.id)}/>
单击将传递给onCLick
的子组件 <article className="Post" onClick={props.clicked}>
现在,我可以在执行/更改
之类的操作时修复错误clicked={() => this.postClicked(el.id)}
[问题]:有人可以告诉我为什么我首先收到上述错误,为什么这个(clicked={() => this.postClicked(el.id)}
)能够修复它。
答案 0 :(得分:3)
您的更改为:
clicked={() => this.postClicked(el.id)})}
修复了您的问题,因为您不是立即调用函数this.postClicked()
,而是创建一个只在需要时才会调用的新函数。