时间戳

首页 > 解决方案 > 反应 componentsDidUpdate 与 SetState 回调

javascript - 反应 componentsDidUpdate 与 SetState 回调

问题描述

如果我运行这段代码，我会得到无限循环componentDidMount，添加 if 语句(prevState !== this.state)也无济于事。

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什么？

标签： javascriptreactjs

解决方案

每次更新组件的 state 或 props 时，组件都会重新渲染并调用componentDidUpdate. 所以这两个函数addIngredientHandler都会updatePurchaseState触发componentDidUpdate被调用。在componentDidUpdate您尝试updatePurchaseState再次调用时，导致无限循环。

正确执行此操作的方法是componentDidUpdate，您必须通过将当前状态与先前状态进行比较来检查是否updatePurchaseState应该调用：

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

更多细节请阅读React官方文档

推荐阅读