我有一个设置屏幕,我可以从用户那里获取一些信息,例如年龄、体重和性别,在获得这些信息后,我计算用户每天应该喝多少水。
我想自动计算这个金额,而不需要任何计算按钮。
不变违规:超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时,可能会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。
我当前计算水量的代码
//function to calculate how much water to drink
waterCalculator = () => {
//let weightPound = this.state.weight * 2.2046;
let weightValue = this.state.weight;
let ageValue = this.state.age;
let waterAmount = null;
if (ageValue < 30) {
waterAmount = weightValue * 40;
} else if (ageValue >= 30 || ageValue <= 55) {
waterAmount = weightValue * 35;
} else {
waterAmount = weightValue * 30;
}
this.setState({ sliderValue: waterAmount });
};
这就是我想要自动更新我的水量的方式
//checking if age and weight and gender states are changed call the function
componentDidUpdate(prevState) {
if (
this.state.age !== prevState.age &&
this.state.weight !== prevState.weight &&
this.state.gender !== prevState.gender
) {
this.waterCalculator();
}
}
componentDidUpdate(prevState) { // <===Error
}
问题在于第一个参数componentDidUpdate
is prevProps
not prevState
解决问题
componentDidUpdate(prevProps, prevState) {
...
}
只需放置prevState
进入第二个参数
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)