错误:超过最大更新深度。setState抛出错误
错误:超过最大更新深度。setState抛出错误
提问于 2022-08-25 17:27:28
export class ABC extends React.Component {
constructor(props) {
super(props);
this.state = {
abc: null
};
}
renderOptions() {
this.setState({
abc: abcArray.length !== 0
});
return;
}
renderRadio() {
return (
<Field
id="abc"
name="abc"
values={this.renderOptions()}
/>
);
}
render() {
return (
<div>
{this.renderRadio()}
</div>
);
}
}
export default connect(mapStateToProps)(ABC);我试图在setState中使用renderOptions()，这给出了下面的错误。
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我无法理解我在这里做错了什么。
任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-08-25 17:29:26
在renderRadio() -> values={this.renderOptions()}中，您正在调用renderOptions函数。该函数调用this.setState({abc: abcArray.length !== 0});。然后，react将尝试重新修改组件。这将创建一个循环。为了避免这种情况，您应该将值支柱更改为这个values={this.renderOptions}
我已经重构了你的代码。
export class ABC extends React.Component {
constructor(props) {
super(props);
this.state = {
abc: null
};
}
renderOptions() {
this.setState({
abc: abcArray.length !== 0
});
return;
}
renderRadio() {
return (
<Field
id="abc"
name="abc"
values={this.renderOptions}
/>
);
}
render() {
return (
<div>
{this.renderRadio()}
</div>
);
}
}
export default connect(mapStateToProps)(ABC);Stack Overflow用户
发布于 2022-08-25 17:29:00
您的render方法正在调用setState，这将触发再次调用render。
您不应该在setState中调用renderOptions。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73491537
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号