React中componentDidUpdate与setState回调对比及无限循环问题排查

嘿，我来帮你理清这个问题的根源和解决办法！

首先咱们拆解一下你代码里的核心问题：

问题出在哪？ #

你当前在componentDidUpdate里直接调用updatePurchaseState，如果这个方法内部是通过this.setState修改purchaseable状态的话，就会触发无限循环：

• 组件更新 → 触发componentDidUpdate → 调用updatePurchaseState执行setState → 再次触发组件更新 → 又进入componentDidUpdate，周而复始。

而你尝试用prevState !== this.state阻止循环，这个判断逻辑是无效的——因为React每次更新都会生成全新的state对象，prevState和this.state永远是不同的引用，所以这个条件永远为true，根本拦不住循环。

至于把updatePurchaseState放到setState回调里就正常，是因为这个回调只会在当前setState完成、状态真正更新后执行一次，不会反复触发组件更新，自然不会形成循环。

给你几个可行的解决方案： #

1. 针对具体属性变化做判断

不要直接比较prevState和this.state的引用，而是比较你关心的具体属性（比如totalPrice），只有当这个属性变化时才执行状态更新：

componentDidUpdate(prevProps, prevState) {
  // 只有当totalPrice发生变化时，才更新purchaseable状态
  if (prevState.totalPrice !== this.state.totalPrice) {
    this.updatePurchaseState();
  }
}

2. 在updatePurchaseState内部做冗余判断

让updatePurchaseState先检查当前状态是否需要更新，避免不必要的setState调用：

updatePurchaseState = () => {
  // 只有当purchaseable当前为false时，才执行更新
  if (!this.state.purchaseable) {
    this.setState({ purchaseable: true });
  }
};

3. 继续使用setState回调的方式（你已经验证有效的方法）

把updatePurchaseState放在修改totalPrice的setState回调里，确保只在totalPrice更新完成后执行一次：

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

补充小知识点： #

React的setState会进行浅比较，如果新状态和旧状态的内容完全一致，就不会触发组件重新渲染。但如果你的updatePurchaseState每次都强制设置purchaseable: true，而之前已经是true，那setState不会触发更新——但前提是你得先阻止它反复进入componentDidUpdate执行setState的逻辑。

内容的提问来源于stack exchange，提问作者Svetoslav Dimitrov