我收到此错误 Invariant Violation: Maximum update depth exceeded 但在我的代码中找不到无限循环

Question

我在网上发现此错误是由调用无限循环引起的，但我无法弄清楚具体是什么导致了该错误，如果更有经验的开发人员可以帮助我，这将是一个巨大的帮助我花了很多钱时间就可以了

还想知道我是否将代码的 javascript 部分放在了错误的位置

export default class App extends React.Component {

  constructor(props) {
     super(props);

     this.state = {
       soldPrice: 0,
       shippingCost: 0,
       shippingCharge: 0,
       itemCost: 0,
       profit: '',
       paypalFee: 0.30,
       paypalFeePercentage: 0.029,
       ebayFee: 0.1,
       profitMargin: '',
       paypalFeeTotal: '',
       ebayFeeTotal: '',
       profitColor: '',
       componentStyle: 'styles.inputStyleInactive',


     };
}


  render() {
     const { soldPrice, shippingCost, shippingCharge, itemCost,
       paypalFee, ebayFee, paypalFeePercentage,
      } = this.state;

     /*
       Define helper function that recovers a 0 as a default value
       if "non-a-number" results from parseFloat
       */
       const safeParseFloat = (str) => {
         const value = Number.parseFloat(str);

         return Number.isNaN(value) ? 0 : value;
       };

       let sp = safeParseFloat(soldPrice);
       const sc = safeParseFloat(shippingCost);
       const sCharge = safeParseFloat(shippingCharge);
       const ic = safeParseFloat(itemCost);
       const pf = safeParseFloat(paypalFee);
       const ef = safeParseFloat(ebayFee);
       const pfp = safeParseFloat(paypalFeePercentage);


      sp += sCharge;

      const calculation = sp - sp * pfp -
      pf
      - sp * ef - sc
      - ic;

      // if profit is more than 10 than the profit will be displayed as 00.00
      // otherwise it will be displayed as 0.00
      let i;

      if (calculation > 1000) {
        i = 6;
      } else if (calculation > 100) {
        i = 5;
      } else if (calculation > 100) {
        i = 3;
      } else if (calculation > 1) {
        i = 2;
      }

      const roundedNumber = calculation.toPrecision(i);
      this.setState({
       profit: roundedNumber
      });

      if (roundedNumber > 0) {
       this.setState({
         profitColor: '#26ae60'
       });
      } else if (roundedNumber < 0) {
       this.setState({
         profitColor: '#BA2F16'
       });
      }


      const ebayTotal = ef * sp;
      this.setState({
       ebayFeeTotal: ebayTotal
      });

      let p;

      if (ebayTotal > 1000) {
       p = 6;
      } else if (ebayTotal > 100) {
       p = 5;
      } else if (ebayTotal > 2.5) {
       p = 3;
      } else if (ebayTotal > 0) {
       p = 2;
      }

      const paypalTotal = pfp * sp + pf;
      this.setState({
       paypalFeeTotal: paypalTotal.toPrecision(p)
      });


      const profitPercentage = roundedNumber / ic * 100;
      this.setState({
      profitMargin: profitPercentage.toPrecision(i)
      });


   return (
     <View style={styles.container}>

     <View style={styles.header}>
     <Text style={styles.headerText}>Efees</Text>
     </View>

     <View style={styles.blocks}>

     <View style={styles.inputs} >
     <Text style={styles.inputText}>1. Sold Price</Text>

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>2. Shipping Charge</Text>

     {/*<NumberInput
     onchange={(shippingCharge) => this.setState({ shippingCharge })}
     />*/}
     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>3. Shipping Cost</Text>

     {/*<NumberInput
     onchange={(shippingCost) => this.setState({ shippingCost })}
     />*/}

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>4. Item Cost</Text>

     {/*<NumberInput
     onchange={(itemCost) => this.setState({ itemCost })}
     />*/}

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>5. Ebay Store?</Text>

     {/*<NumberInput
     onchange={(itemCost) => this.setState({ itemCost })}
     />*/}

     </View>

     <View style={styles.inputs}>
     <Text style={styles.inputText}>6. Top Rated Seller?</Text>

     {/*<NumberInput
     onchange={(itemCost) => this.setState({ itemCost })}
     />*/}

     </View>
     </View>

     <View style={styles.results}>
      <Text style={styles.resultText}>eBay Fee:{this.state.ebayFeeTotal}</Text>
      <Text style={styles.resultText}>Paypal Fee:{this.state.paypalFeeTotal}</Text>
      <Text style={styles.resultText}>Profit %{this.state.profitMargin}</Text>
      <Text style={styles.profitResult}>
      TOTAL PROFIT:{this.state.profit}</Text>
      </View>

      <TouchableOpacity
      style={styles.calcButton}
      onPress={this.calculateProfit}
      >
         <Text style={styles.calcText}>Calculate </Text>
       </TouchableOpacity>

      </View>
 );
 }
}

Answer 1

您在render 中设置状态，这几乎总是一个坏主意，可能会导致无限重新渲染。

您有很多处于状态的东西似乎不是有状态的，而是可能（或可能不需要）需要传递给子组件的简单局部变量——但不是有状态的，因为您的组件中没有任何内容除了 state 和 render。

Answer 2

您已将 setstate 放入渲染中，理想情况下应该是纯函数。您可以在类中添加一些函数，并且在组件生命周期中，您可以触发所有设置状态的方法一次，这些方法现在正在渲染方法中完成。

在 render 方法中调用 setState 方法会导致无限循环。

• Cross-check this StackOverflow answer onceCalling setState in render is not avoidable 和

• 查看此 github 反应讨论以更清楚地了解该问题

。 https://github.com/facebook/react/issues/5591