- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在制作这个 Conway 的生命游戏 React 项目,它工作得很好,但是当我添加最后几个按钮来清除棋盘时,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.
从它向我展示的代码片段来看,clear() 函数似乎是这里的问题,但我认为我没有在 render() 中设置状态来触发无限循环。这是清除和 componentDidMount
的所有代码,我的应用程序中没有 componentWillUpdate
或 componentDidUpdate
。
主类中的clear()和Play函数
编辑 1:它告诉我 play() 函数中的 setState 有问题,但是,我总是以这种方式实现播放函数并且它从一开始就一直有效....
clear = ()=>{
var g = Array(this.rows).fill().map(()=> Array(this.cols).fill(false));
this.setState({
generations:0,
fullGrid: g
})
}
.....
play = () => {
let g1 = this.state.fullGrid;
let g2 = arrayClone(this.state.fullGrid);
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
let count = 0;
if (i > 0)
if (g1[i - 1][j]) count++;
if (i > 0 && j > 0)
if (g1[i - 1][j - 1]) count++;
if (i > 0 && j < this.cols - 1)
if (g1[i - 1][j + 1]) count++;
if (j < this.cols - 1)
if (g1[i][j + 1]) count++;
if (j > 0)
if (g1[i][j - 1]) count++;
if (i < this.rows - 1)
if (g1[i + 1][j]) count++;
if (i < this.rows - 1 && j > 0)
if (g1[i + 1][j - 1]) count++;
if (i < this.rows - 1 && this.cols - 1)
if (g1[i + 1][j + 1]) count++;
if (g1[i][j] && (count < 2 || count > 3)) g2[i][j] = false;
if (!g1[i][j] && count === 3) g2[i][j] = true;
}
}
this.setState({
fullGrid: g2,
generations: this.state.generations + 1
});
}
playButton = ()=>{
clearInterval(this.intervalId);
this.intervalId = setInterval(this.play, this.speed);
}
pauseButton = ()=>{
clearInterval(this.intervalId);
}
slow = ()=>{
this.speed = 1000;
this.playButton();
}
fast = ()=>{
this.speed = 100;
this.playButton();
}
clear = ()=>{
var g = Array(this.rows).fill().map(()=> Array(this.cols).fill(false))
this.setState({
generations:0,
fullGrid: g
})
}
按钮类
class Buttons extends React.Component{
handleSelect = (evt) =>{
this.props.gridSize(evt);
}
render(){
return (
<div className="center">
<ButtonToolbar>
<button className='btn btn-info' onClick={this.props.playButton}>
PLAY
</button>
<button className='btn btn-info' onClick={this.props.pauseButton}>
PAUSE
</button>
<button className='btn btn-info' onClick={this.props.clear}>
CLEAR
</button>
<button className='btn btn-info' onClick={this.props.slow}>
SLOW
</button>
<button className='btn btn-info' onClick={this.props.fast}>
FAST
</button>
<button className='btn btn-info' onClick={this.props.seed}>
SEED
</button>
<DropdownButton
title="Grid Size"
id="size-menu"
onSelect={this.handleSelect}
>
<MenuItem eventKey="1">20x10</MenuItem>
<MenuItem eventKey="2">50x30</MenuItem>
<MenuItem eventKey="3">70x50</MenuItem>
</DropdownButton>
</ButtonToolbar>
</div>
)
}
最佳答案
您的 onClick
处理程序不断被调用。将它们更改为返回您希望调用的函数的函数,这应该可以解决您的问题。
例子:
<button className='btn btn-info' onClick={() => this.props.playButton}>
PLAY
</button>
关于javascript - 超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49222113/
我可以在传递给 this.setState() 的回调定义中显式调用 this.setState() 吗? this.setState( { openA:true }, () => {
我有一个从 api 获取数据的场景。在这种情况下,每当我从商店获取新值时,我的 componentWillReceiveProps() 就会被触发。 componentWillReceiveProps
在这个 componentDidUpdate 方法中,在执行 setState 将引号设置为从 fetch 返回的内容后,我必须使用回调再次执行 setState 以将 randomQuoteInde
正如 another question 中向我指出的那样,如果我在 setState、randomQuoteIndex() 中有一个不带参数的函数调用,并且该函数使用该 setState 中设置的状态
问题:当我使用 this.setState 并在回调中输出状态时,它根本不会改变,但是当我将 setstate 嵌套在 setstate 中时,它就会正常工作。 例子:这行不通- this.setSt
这个问题在这里已经有了答案: Why does setState take a closure? (2 个答案) 关闭 4 年前。 我对这两者的区别还是有点迷惑 isBusy = false;
当我使用 setState () 文本出现在调试控制台中.. setState() callback argument returned a Future. The setState() method
这个问题已经有答案了: Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (4 个回答) React - unca
之间的区别 - this.setState({value: 'xyz', name: 'john', color: 'orange'}) 对比 setValue('xyz'); setName('jo
之间的区别 - this.setState({value: 'xyz', name: 'john', color: 'orange'}) 对比 setValue('xyz'); setName('jo
我在运行代码时收到以下警告: Line 48: Do not mutate state directly. Use setState() react/no-direct-mutation-state
我是 React 的新手,我注意到我们使用 this.setState() 而不是 super.setState() 请我清楚地解释为什么我们用它来调用父类(super class)方法??示例: c
我一生都无法在我的 react 组件中传递这个 TypeError 。我已阅读所有相关主题并实现了几乎所有建议的修复,但均无济于事。 import React, { Component } from
我知道这可能是一个 JavaScript 问题而不是 React 问题,但我无法理解 React setState 的上述签名。 函数参数列表中的方括号和逗号有什么作用? 我知道如何将它与更新程序一起
是否可以在this.setState的回调中调用this.setState? 我正在制作一个 Roguelike Dungeon 并有一个设置,其中在 this.setState 的回调中使用了一个辅
我正在使用 react-navigation 进行路由。在一个组件上,我尝试设置 navigationOptions 以显示汉堡包按钮以打开和关闭侧边栏(抽屉)。所以 onPress 我试图为我的侧边
在之前的 React 版本中,我们可以在状态更改后执行代码,方法如下: setState( prevState => {myval: !prevState.myval}, () => { co
有一个 react 问卷组件,它将选定的答案添加到 this.state = {answer: []} 中,效果很好。同时,当用户更新答案时,它会添加为另一个对象。当questionID相同时,是否有
我正在使用 WebSocket 与我的服务器进行通信,并在我的 handleSubmit() 函数上输入一些值,并在此基础上与服务器进行通信并将我的状态更新为数据从 ws 收到。所以,第一次,一切都工
componentDidMount(prevProps, prevState, prevContext) { let [audioNode, songLen] = [this.refs.aud
我是一名优秀的程序员,十分优秀!