超过最大更新深度 - 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)
;创建一个(隐藏的)无限循环。 () => this.remove(i)
是一个函数,因此状态或道具不会改变。此外,它可能是你想要编写的代码;)
【讨论】:
可能是因为你是using index as a key以上是关于超过最大更新深度 - React Js的主要内容,如果未能解决你的问题,请参考以下文章