javascript - react componentsDidUpdate 与 SetState 回调

Question

如果我运行此代码，我会在 componentDidMount 中出现无限循环，在 (prevState !== this.state) 中添加 if 语句也无济于事。

state = {
    purchaseable: false,
    totalPrice: 0
  }

  updatePurchaseState = () => ({
      purchaseable: true
    });

  addIngredientHandler = (type) => {
    const newPrice = totalPrice + 1
    this.setState({
      totalPrice: newPrice
    });
  }

  componentDidUpdate (prevProps, prevState) {
    this.updatePurchaseState()
  }

但是如果我在 setState 回调中执行 updatePurchaseState 一切正常:

addIngredientHandler = () => {
    let newPrice = newPrice +1
    this.setState(() => ({
      totalPrice: newPrice
    }), () => this.updatePurchaseState());
  }

根据 React 文档 https://reactjs.org/docs/react-component.html#setstate componentDidUpdate 是执行 updatePurchaseState 的首选方式。

为什么 componentDidUpdate 会进入无限循环，但 setState 回调不会同时更新状态和重新渲染？调用 updatePurchaseState 的最佳方法是什么？

Answer 1

每次更新组件的状态或 Prop 时，组件都会重新渲染并调用 componentDidUpdate。所以函数 addIngredientHandler 和 updatePurchaseState 都会触发 componentDidUpdate 被调用。在 componentDidUpdate 中，您尝试再次调用 updatePurchaseState，导致无限循环。

正确的做法是，在 componentDidUpdate 中，您必须通过比较当前状态与之前的状态来检查是否应该调用 updatePurchaseState:

  componentDidUpdate (prevProps, prevState) {
    if (this.state.purchaseable !== prevState.purchaseable) {
      this.updatePurchaseState()
    }
  }

请阅读official document React 的更多详细信息