超过最大更新深度 - React Js

Posted

技术标签:

【中文标题】超过最大更新深度 - React Js【英文标题】:Maximum update depth exceeded - React Js 【发布时间】:2019-05-28 00:22:58 【问题描述】:

这个错误: 超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

为什么会出现这个错误?

  import React,  Component  from 'react';
  import './App.css';

    class App extends Component 
       constructor(props)
         super(props);
         this.state=(
           todos:[],
         )
         this.add = this.add.bind(this);
         this.remove = this.remove.bind(this);
    
    //this.array.splice(2,1)
    /*
      let arrayy = [...this.state.array]
      let removed = arrayy.splice(deger,1);
      this.setState(
        array:arrayy,
      )
    */

    add()
      const deger = document.getElementById('deger').value;
      const todosarray = this.state.todos;
      todosarray.push(deger)
      this.setState(
        todos:todosarray,
      )
    

    remove(num)
      let arrayy = [...this.state.todos]
      arrayy.splice(num,1)
      this.setState(
        array:arrayy,
      )
    

    render() 
      const data = this.state.todos;
      const listItems = data.map((result,i) => <li key=i onClick=this.remove(i)>result </li>);
      return (
        <div >
          <input id="deger"></input>
          <button onClick=this.add>Add</button>
          <div id="items">
            listItems
          </div>
        </div>
      );
    
  
  export default App;

【问题讨论】:

【参考方案1】:

替换这个:

onClick=this.remove(i)

通过这个:

onClick=() => this.remove(i)

解释:在渲染时,React 评估this.remove(i),这会改变状态或道具,从而触发另一个渲染,并循环重新评估this.remove(i);创建一个(隐藏的)无限循环。 () =&gt; this.remove(i) 是一个函数,因此状态或道具不会改变。此外,它可能是你想要编写的代码;)

【讨论】:

可能是因为你是using index as a key

以上是关于超过最大更新深度 - React Js的主要内容,如果未能解决你的问题,请参考以下文章

我从 React 得到一个错误:超过最大更新深度

React Navigations 5:超过最大更新深度

React-Native = Invariant Violation:超过最大更新深度

求教:最大更新深度超过的原因

React App登录错误:超过最大更新深度

阿波罗钩子超过了最大更新深度