此错误:超出最大更新深度。当组件在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;
替换此项:
onClick={this.remove(i)}
据此:
onClick={() => this.remove(i)}
说明:渲染时,React计算此值。移除(i)
,它会更改状态或道具,从而触发另一个渲染,并循环以重新评估。删除(i)
;创建(隐藏的)无限循环<代码>()=