componentDidUpdate行为异常触发无限循环，该如何排查与正确使用？

• 未限制componentDidUpdate的触发条件：componentDidUpdate会在组件每一次更新（state/prop变更、父组件重渲染）后全量执行，你当前的判断逻辑仅校验了两个状态有值，未校验值是否发生过变更，只要两个值存在，每次更新都会触发fetchValues调用。
• 接口调用触发循环更新：fetchValues是Redux action，调用后会修改Redux全局状态，你的组件订阅了对应状态的话，状态变更会触发组件再次更新，重新进入componentDidUpdate，形成死循环。
• 潜在变量名错误：你在handleRegionChange中更新的是region状态，但判断逻辑中使用的是this.state.regionId，若为笔误请先统一变量名，否则状态变更无法被正确监听。

componentDidUpdate默认接收prevProps、prevState两个入参，分别对应更新前的属性和状态值，你需要将当前需要监听的状态与更新前的值做对比，只有当值真的发生变更，且满足执行条件时才调用接口。
修改后的代码参考：

componentDidUpdate(prevProps, prevState) {
  // 取出前后两次的核心判断值
  const preRegion = prevState.regionId?.[0]
  const currentRegion = this.state.regionId?.[0]
  const preProduct = prevState.productId?.[0]
  const currentProduct = this.state.productId?.[0]

  // 仅当两个值都存在，且任意一个值发生了变更时，才调用接口
  if (
    currentRegion && currentProduct &&
    (preRegion !== currentRegion || preProduct !== currentProduct)
  ) {
    this.props.fetchValues(
      currentRegion,
      currentProduct
    )
  }
}

• 所有在componentDidUpdate中执行的会触发组件更新的操作（接口调用、setState、修改全局状态等），必须添加依赖项的前后对比逻辑，仅当依赖项发生变更时才执行，避免无效执行和死循环。
• 如果依赖项是引用类型（数组、对象），不要直接对比引用地址，要对比实际用到的字段值，避免因为引用地址变化导致的不必要触发。
• 该逻辑和函数组件中useEffect指定依赖项的作用完全一致，本质都是限制副作用的执行时机。

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