React中componentDidUpdate触发GET请求致无限渲染的解决方案求助

看起来你遇到的问题根源在于**componentDidUpdate里的逻辑触发了无限的props更新循环**，我们一步步拆解并解决它：

问题分析 #

你的代码形成了这样的循环链：

1. 点击更新/删除按钮，触发API请求
2. 手动修改本地state的accesConf（或API更新后redux状态变化）
3. componentDidUpdate检测到prevProps.accesConf !== this.props.accesConf
4. 调用getAccesConfAction()重新获取数据，更新redux里的accesConf
5. props更新，再次触发componentDidUpdate，重复步骤3-4，形成无限循环

另外你同时维护了本地state和redux状态的accesConf，这很容易导致状态不一致，也是问题的诱因之一。

解决方案 #

1. 移除本地state的accesConf，完全依赖redux props #

既然已经通过mapStateToProps把redux里的accesConf映射到组件props，没必要再在本地state存一份。这样能避免状态同步问题，简化逻辑：

constructor() {
  super();
  this.state = { test: false }; // 移除本地的accesConf状态
}

// 直接删除getDerivedStateFromProps方法，不需要再同步props到本地state

2. 重构componentDidUpdate逻辑（或直接移除） #

现在组件数据源完全来自props，更合理的做法是只在更新/删除操作完成后手动触发数据刷新，而非依赖componentDidUpdate自动触发。可以先注释或删除当前的componentDidUpdate：

// componentDidUpdate(prevProps, prevState) {
//   // 暂时移除该方法，后续用手动触发替代
// }

3. 重写更新/删除回调，手动触发数据刷新 #

在showUpdateInfoConfirmation和showDeleteConfirmation的onOk回调里，不要直接修改本地state，而是等待API请求完成后，手动调用getAccesConfAction刷新redux状态：

修改删除操作回调：

showDeleteConfirmation(value, idConf, record) {
  confirm({
    title: 'Voulez vous supprimer cet contact ?',
    content: '',
    okText: 'Oui, je confirme',
    okType: 'danger',
    cancelText: 'Non',
    async onOk() {
      try {
        await deleteAccesConfRequest(idConf); // 等待删除请求完成
        this.props.getAccesConfAction(); // 手动刷新数据
        NotificationManager.success("Le contact est supprimé avec succès !", "");
      } catch (error) {
        NotificationManager.error("Échec de la suppression !", "");
      }
    },
    onCancel() {},
  });
}

修改更新操作回调：

showUpdateInfoConfirmation(value, idConf, record) {
  confirm({
    title: 'Voulez vous modifier la visibilité d infos employeur ?',
    content: '',
    okText: 'Oui, je confirme',
    okType: 'danger',
    cancelText: 'Non',
    async onOk() {
      try {
        await updateAccesConfRequest(idConf); // 等待更新请求完成
        this.props.getAccesConfAction(); // 手动刷新数据
        NotificationManager.success("L'infos employeur est modifié avec succès !", "");
      } catch (error) {
        NotificationManager.error("Échec de la modification !", "");
      }
    },
    onCancel() {},
  });
}

4. 调整render中的数据源 #

现在不再使用本地state的accesConf，直接从props获取数据：

render() {
  const data = this.props.accesConf; // 从redux props获取数据
  // ... 剩余render逻辑保持不变
}

为什么这样能解决循环？ #

• 移除了本地state和redux状态的同步，避免了不必要的状态变化触发更新
• 不再依赖componentDidUpdate自动调用获取数据的action，而是在明确的更新/删除操作完成后手动触发，从根源切断了循环链
• 用async/await确保API请求完成后再刷新数据，保证了数据的一致性

这样修改后，点击更新或删除按钮只会在API操作完成后刷新一次数据，不会再出现无限循环的问题了。

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