Javascript 超过最大更新深度_Javascript_Reactjs

Javascript 超过最大更新深度

javascript reactjs

Javascript 超过最大更新深度,javascript,reactjs,Javascript,Reactjs,我收到以下错误（从虚拟服务器接收数据后）超过最大更新深度。当一个组件在componentWillUpdate或组件更新。React将嵌套更新的数量限制为防止无限循环这是有关的守则 class Blog extends Component { state = { posts: [], selectedPostId: null } componentDidMount () { axios.get("https://jsonplaceholder.typ

我收到以下错误（从虚拟服务器接收数据后）

超过最大更新深度。当一个组件在componentWillUpdate或组件更新。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;

及

单击将传递给子组件，该子组件为onCLick

 <article className="Post"  onClick={props.clicked}>

[问题]：有人能告诉我为什么我首先会收到上述错误，为什么（

单击={（）=>this.postClicked（el.id）}

）能够修复它

更改为：

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

修复您的问题，因为您正在创建一个新函数，而不是立即调用函数

this.postClicked（）

，该函数将仅在需要时调用。

您的更改为：

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

修复您的问题，因为您不是立即调用函数

this.postClicked（）

，而是创建一个新函数，该函数将仅在需要时调用。

该函数通过触发重新渲染的

setState（）

更新状态。当它重新呈现时，会再次调用该函数，从而触发另一个状态更新，以此类推。您的修复之所以有效，是因为它创建了一个调用

postClicked（）

，而不是实际调用

postClicked（）

@Jayce444的函数，谢谢您的回答，所以

这个.postClicked（）

调用一个更新

setState（）

的方法，当它重新呈现时，它再次调用setState，形成一个无限循环？但是，当函数

{（）.postClicked（el.id）}

调用时，它不会调用一个同样具有setState的方法，从而类似地重新呈现内容吗？这有什么不同？我不知道

{（）.postClicked（el.id）}

是什么，你从哪里得到的？这是无效的语法，在你的问题中也是如此。如果您指的是arrow函数：

{（）=>this.postClicked（el.id）}

那么当调用该函数时，是的，它会重新呈现状态，但只有在调用该函数时，比如说单击via。渲染时不调用它，而是响应action调用它，action函数通过触发重新渲染的

setState（）