React中componentDidUpdate触发无限循环错误的原因及排查建议

你遇到的这个问题其实很典型——哪怕加了if判断还是触发无限更新，大概率是你的判断逻辑本身出了问题，咱们先从你贴的代码入手分析，再给你几个实用的排查方向：

先揪出你代码里的核心问题 #

你在componentDidUpdate里写的判断条件是：

if (this.props.submissions !== prevState.submissions) {
  // ... 处理逻辑并setState
}

这里犯了两个关键错误：

1. 你拿当前props的submissions和之前state的submissions做比较，这完全是两个不相关的变量！componentDidUpdate的第一个参数prevProps才是上一次的props，你应该监听的是props的变化，而不是props和state的无意义对比。
2. 数组是引用类型，直接用!==比较的是内存地址，哪怕两个数组内容完全一样，只要是新生成的数组（比如父组件传参时用了[...data]），这个判断就会成立，进而触发setState，导致组件再次更新，陷入无限循环。

具体排查方向 #

• 修正条件判断的逻辑
  首先把判断对象改成前后props的对比，而不是props和state。如果需要判断数组内容是否变化（而不是引用），可以用深比较：

  // 示例：用lodash的isEqual做深比较，或者自己实现简单的内容对比
  const submissionsChanged = !_.isEqual(this.props.submissions, prevProps.submissions);
  if (submissionsChanged) {
    // 去重逻辑和setState
  }
  

  这样只有当props里的submissions内容真的变化时，才会执行后续逻辑，避免不必要的更新。

• 确认setState是否会触发重复更新
  你在componentDidUpdate里调用setState会再次触发组件更新，进入下一轮componentDidUpdate。如果你的条件判断没拦住（比如之前的判断逻辑错误），就会无限循环。修正判断条件后，要确保只有当props确实变化时才执行setState。

• 检查父组件的传参逻辑
  有时候父组件会频繁重新渲染，导致每次传给子组件的submissions都是新的数组引用（哪怕内容没变）。比如父组件在render里直接创建数组：

  // 父组件里的错误写法：每次render都会生成新数组
  <ChildComponent submissions={[...this.state.data]} />
  

  这种情况会导致子组件的componentDidUpdate反复触发，你需要优化父组件的传参，比如把数组缓存起来，或者用useMemo（函数组件）、shouldComponentUpdate（类组件）来避免不必要的渲染。

• 优化去重逻辑的写法
  你现在用filter来做去重其实不太合适，filter是用来过滤数组元素的，这里用forEach或者reduce更清晰，也能避免一些潜在的逻辑问题：

  // 用forEach替代filter，逻辑更直观
  this.props.submissions.forEach((submission: any) => {
    const orgExists = uniqueOrganizations.some(o => o.organizationId === submission.user.organization.organizationId);
    if (!orgExists) uniqueOrganizations.push(submission.user.organization);
    
    const windowExists = uniqueWindows.some(w => w.windowId === submission.window.windowId);
    if (!windowExists) uniqueWindows.push(submission.window);
  });
  

修正后的完整代码示例 #

componentDidUpdate(prevProps: any, prevState: any) {
  // 用深比较判断props的submissions是否真的变化
  const hasSubmissionsChanged = !_.isEqual(this.props.submissions, prevProps.submissions);
  
  if (hasSubmissionsChanged && this.props.submissions !== null) {
    let uniqueOrganizations: any = [];
    let uniqueWindows: any = [];
    
    this.props.submissions.forEach((submission: any) => {
      // 组织去重
      const isOrgExist = uniqueOrganizations.some(
        o => o.organizationId === submission.user.organization.organizationId
      );
      if (!isOrgExist) {
        uniqueOrganizations.push(submission.user.organization);
      }
      
      // 窗口去重
      const isWindowExist = uniqueWindows.some(
        w => w.windowId === submission.window.windowId
      );
      if (!isWindowExist) {
        uniqueWindows.push(submission.window);
      }
    });
    
    this.setState({ uniqueOrganizations, uniqueWindows });
  }
}

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