Question

我有一个设置屏幕，可以从用户那里获得诸如年龄，体重和性别之类的信息，在此信息之后，我将计算出用户每天应该喝多少水。

我想自动计算该金额，而无需任何计算按钮。

不变违反：超出最大更新深度。当组件重复调用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();
     }
   }

Answer 1

componentDidUpdate(prevState) { // <===Error

}

问题出在componentDidUpdate中的第一个参数是prevProps而不是prevState

解决问题

componentDidUpdate(prevProps, prevState) {
  ...
}

只需将prevState放入第二个参数

Answer 2

当体重，年龄或性别发生变化时，我会完全避免componentDidUpdate，例如

onChange = name = e => {
  this.setState({ [name]: e.target.value }, this.calcSliderValue);
}

calcSliderValue = () => {
  if (all_inputs_are_filled) {
    this.setState({ sliderValue: x });
  }
}

<yourGenderInput onChange={this.onChange('gender')} ... />
<yourAgeInput onChange={this.onChange('age')} ... />

ComponentDidUpdate用法和最大更新深度超出

2 个答案: