超过最大更新深度（没有 onclick）

Question

我知道以前有人问过这个问题，但它似乎对我不起作用，因为我想做的是在没有 onClick 功能的情况下显示 price。

我正在根据 planType 和计费设置price。

代码如下：

    this.state = {
      planType: "", //populated through componentDiDMount
      billing: "", //populated through componentDiDMount
      price: 0
    };
  }

  renderPrice() {
    if (
      this.state.billing === "Monthly" &&
      this.state.planType === "Start-Up Plan"
    ) {
      this.setState({
        price: this.state.total_invoice + 35
      });
    }
  }

  render() {
    return <div>You will be charged {this.renderPrice()}</div>;
  }

Answer 1

永远不要在渲染中使用setState，有更好的方法来做你想做的事情，
我认为您希望在将billing 和planType 设置为特定值时发生价格变化，为此您需要做的就是检查setState 和price 这两个值的时间和地点改变！
例如，您说这两个值是通过componentDidMount 填充的，因此您只需在该位置检查它们的值并将price 设置在那里！就这么简单。
这是一些代码：

import React, { PureComponent } from 'react';

class MyClass extends PureComponent {
    state = {
        billing: null,
        planType: null,
        total_invoice: 0,
    }

    componentDidMount() {
        //These can change through api or any other way you want!
        const newBillingType = 'Monthly';
        const newPlanType = 'Start-Up Plan';

        this.setState({ billing: newBillingType, planType: newPlanType })

        if (newBillingType === "Monthly" && newPlanType === "Start-Up Plan") {
            this.setState({ price: this.state.total_invoice + 35 })
        }
    }

    render() {

        return <div>You will be charged {this.state.price}</div>;
    }
}

export default MyClass;  

请注意，如果您像我在 componentDidMount 中所做的那样在函数内多次调用 setState（没有任何超时），因为 setState 不会立即发生，@987654333 @ 将合并结果，只做一个 setState，这是一件好事，避免了多次更新。

Answer 2

我实际上犹豫发布这个答案。这更像是一种优化，而不是实际的答案。但是自从@oneone要求它。我将发布一个关于如何提高代码可读性的总体思路。

真正需要考虑的一件事是，value 是否真的需要在state 中。如果该值仅用于计算其他一些值，也许您不必将其存储在 state 中。当然我不知道代码的实际实现，所以你必须自己弄清楚。

class Component extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // Do consider if billing / planType is actually necessary to be in state.
      billing: null,
      planType: null,
      price: 0,
      total_invoice: 0,
    };
  } 

  componentDidMount() {
    const { total_invoice } = this.state; 

    const newBilling = 'Monthly';
    const newPlanType = 'Start-Up Plan';

    // default price
    let price = total_invoice;

    this.setState({ billing: newBilling, planType: newPlanType }, () => {
      const { planType } = this.state; 
      // setState callback, state values here are guaranteed to be updated.
      switch (planType) {
        case 'Start-Up Plan':
          price = total_invoice + 35;
          break;
        case 'Standard Plan':
          price = total_invoice + 65;
          break;
        default:
      }
      this.setState({ price });
    });
  }

  render() {
    const { price } = this.state;
    return (
      <div>
        You will be charged {price}
      </div>
    )
  }
}