前端学习之React报错指北

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

报错含义大概是：超出最大更新深度。 当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

render() {
  return (
    <div className="child">子组件
      <button onClick={this.props.getData(this.state.data)}>发送数据</button>
    </div>
  )
}
// 父组件传来的函数
receiveData = (params) => {
  this.setState({
    data: params
  })
  console.log(`params`, params)
}

因为在按钮的事件里，我们给函数传参，加了括号this.props.getData(this.state.data)，代表函数立即执行；

在render()中是不能使用setState的，因为setState造成state改变，state改变就会重新渲染render，每次render又会setState，就会造成页面死循环。

想想就很容易理解，所以解决这个问题，应该传入一个函数指针，可以写成箭头函数，或者在组件里再添加一个方法：

1
2
3
4

emitData = ()=>{
  this.props.getData(this.state.data)
}
<button onClick={this.emitData}>发送数据</button>