超出最大更新深度

时间:2018-06-16 13:21:15

标签: javascript reactjs

我收到以下错误(从虚拟服务器收到数据后)

  

超出最大更新深度。组件时可能会发生这种情况   反复调用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)})能够修复它。

1 个答案:

答案 0 :(得分:3)

您的更改为:

clicked={() => this.postClicked(el.id)})}

修复了您的问题,因为您不是立即调用函数this.postClicked(),而是创建一个只在需要时才会调用的新函数。