javascript - ComponentDidUpdate usage and Maximum update depth exceeded - Stack Overflow

admin管理员组

文章数量:1291006

I have a setting screen where I get number of info from user such as age, weight and gender and after this info I am calculating how much water user should drink per day.

I would like to calculate this amount automatically without any need of calculate button.

Invariant Violation: Maximum update depth exceeded. This can happen when a ponent repeatedly calls setState inside ponentWillUpdate or ponentDidUpdate. React limits the number of nested updates to prevent infinite loops.

My current code to calculate water amount

  //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 });
  };

This how I want to automatically update my water amount

  //checking if age and weight and gender states are changed call the function
   ponentDidUpdate(prevState) {
     if (
       this.state.age !== prevState.age &&
       this.state.weight !== prevState.weight &&
       this.state.gender !== prevState.gender
     ) {
       this.waterCalculator();
     }
   }

I have a setting screen where I get number of info from user such as age, weight and gender and after this info I am calculating how much water user should drink per day.

I would like to calculate this amount automatically without any need of calculate button.

Invariant Violation: Maximum update depth exceeded. This can happen when a ponent repeatedly calls setState inside ponentWillUpdate or ponentDidUpdate. React limits the number of nested updates to prevent infinite loops.

My current code to calculate water amount

  //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 });
  };

This how I want to automatically update my water amount

  //checking if age and weight and gender states are changed call the function
   ponentDidUpdate(prevState) {
     if (
       this.state.age !== prevState.age &&
       this.state.weight !== prevState.weight &&
       this.state.gender !== prevState.gender
     ) {
       this.waterCalculator();
     }
   }

• javascript
• react-native

Share Improve this question Follow asked Jan 27, 2019 at 12:40 sinansinan 57011 gold badge77 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

}

The problem is with the first argument in ponentDidUpdate is prevProps not prevState

To fix the problem

ponentDidUpdate(prevProps, prevState) {
  ...
}

Simply place prevState into second argument

I would avoid ponentDidUpdate entirely by doing it when weight, age, or gender changes i.e.

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')} ... />

本文标签： javascriptComponentDidUpdate usage and Maximum update depth exceededStack Overflow