超过ReactJs componentDidMount的最大更新深度
我理解了这个错误，我的componentDidUpdate函数正在创建一个无限循环，我不知道如何修复它。我发现了回溯显示的两个错误，但我不知道该怎么办。这里是提交处理函数，它在主(logup)组件中：
submitHandler = event => {
event.preventDefault();
const {month, day, year} = this.state.data;
this.setState({
loading: true,
error: false,
errors: {},
data: {
...this.state.data,
foundation: `${month} ${day} de ${year}`
}
});
fetch('http://127.0.0.1:8000/logup/',
{
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(this.state.data)
}).then(response => {
this.setState({ loading: false });
if (response.ok) {
console.log('redirect to social nets');
} else {
this.setState({ error: true });
}
return response.json();
}).then(json => {
if (this.state.error) {
this.setState({errors: json}) // The traceback give me error right here
} else {
console.log(json);
}
});
};我在logup组件的呈现中也有许多Input组件，回溯在这里也显示了错误。
state = {
error: false
};
componentDidUpdate() {
let bad = Object.keys(this.context.errors).includes(this.props.name);
if (bad) {
this.setState({ error: true }); // traceback give me error too.
};
};
回答 3
Stack Overflow用户
发布于 2020-12-08 13:53:07
在componentDidUpdate中，您可以通过以下方式更新状态：
this.setState({ error: true })您可以在以下条件下执行此操作：
Object.keys(this.context.errors).includes(this.props.name)设置状态会导致组件重新呈现并更新，因此componentDidUpdate将再次运行。然而，当这种情况发生时，你的上述条件很可能仍然是真的。因此，您将再次更新状态，并且React不会缩短状态更新的过程，因为您每次都会创建一个新对象。在这里保存您自己的一个简单方法是将您的条件更改为：
if (bad && !this.state.error) {
this.setState({ error: true }); // traceback give me error too.
};Stack Overflow用户
发布于 2020-12-08 13:55:36
您应该在componentDidUpdate中使用某种类型的条件，以避免触发状态更新。如下所示：
componentDidUpdate(prevProps, prevState) {
let bad = Object.keys(this.context.errors).includes(this.props.name);
if (prevState.error !== this.state.error && bad) {
this.setState({ error: true }); // traceback give me error too.
};
};始终比较componentDidUpdate中的prevState和currentState值，因为在大多数情况下，这个条件就足够了。
注意:在开始使用
componentDidUpdate之前，请参阅文档，因为它还提供了prevProps和prevState值，这些值在此类情况下总是很有帮助。
Stack Overflow用户
发布于 2020-12-08 13:56:00
变化
if (bad) {
this.setState({ error: true }); // traceback give me error too.
};至
if (bad && !this.state.error) {
this.setState({ error: true }); // traceback give me error too.
};在componentDidUpdate中使用setState将导致它重新呈现和调用componentDidUpdate。添加额外的检查将有助于停止此循环。
https://stackoverflow.com/questions/65193720
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号