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方法中完成。

在render方法中调用setState方法将导致您进入无限循环。

Cross-check this StackOverflow answer once Calling setState in render is not avoidable 和
请检查此github对问题的讨论以更加明确

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

我收到此错误不变违规：超出最大更新深度，但在我的代码中找不到无限循环

2 个答案: