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()
  }

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

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

每次更新组件的状态或道具时，组件都将重新呈现并调用componentDidUpdate。因此，addIngredientHandler和updatePurchaseState函数都会触发componentDidUpdate被调用。在componentDidUpdate中，您尝试再次调用updatePurchaseState，导致无限循环。

正确地做到这一点的方法是，在componentDidUpdate中，您必须通过将当前状态与之前的状态进行比较来检查是否应该调用updatePurchaseState：

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

请阅读React的official document了解更多详情

React componentsDidUpdate vs SetState回调

1 个答案: