Reactjs 超过最大更新深度-React Js

此错误： 超过最大更新深度。当组件在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;

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
这个州=({
待办事项：[]，
})
this.add=this.add.bind（this）；
this.remove=this.remove.bind（this）；
}
//此.array.splice（2,1）
/*
让arrayy=[…this.state.array]
拆下后=阵列拼接（脱胶，1）；
这是我的国家({
数组：arrayy，
})
*/
添加（）{
const deger=document.getElementById（'deger'）.value；
const todosarray=this.state.todos；
todosarray.推（除气）
这是我的国家({
todos:todosarray，
})
}
删除（num）{
让arrayy=[…this.state.todos]
阵列拼接（数量，1）
这是我的国家({
数组：arrayy，
})
}
render（）{
const data=this.state.todos；
const listItems=data.map（（result，i）=>
{result}
）；
返回(
添加
{listItems}
);
}
}
导出默认应用程序；

替换此：

onClick={this.remove(i)}

据此：

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

说明：在渲染时，React计算this.remove（i），它会更改状态或道具，从而触发另一个渲染，并循环重新计算this.remove（i）；创建（隐藏的）无限循环

（）=>此.remove（i）

是一个函数，因此状态或道具不会更改。而且，这可能是您想要编写的代码；）

也许是因为你