React报错Maximum update depth exceeded，依赖项重复更新求助

问题根源 #

你遇到的无限循环问题核心原因如下：

• RTK Query 每次返回的 data 都是新的数组引用，哪怕数组内容完全一致
• 你将这个数组作为 useEffect 的依赖，组件每次渲染时，selectedParameters 的引用都会变化，触发 useEffect 执行
• useEffect 里调用 setParameters 更新组件状态，会引发组件重新渲染，重新获取到新引用的 selectedParameters，再次触发 useEffect，形成无限循环

解决方案 #

方案1：直接使用RTK Query返回值，无需同步到组件State #

RTK Query 本身已经封装了缓存、状态管理逻辑，完全不需要把查询结果同步到组件自己的 useState 中。你可以直接在组件里使用查询返回的数据：

// 移除useEffect和setParameters相关代码，直接使用查询结果
const { data: selectedParameters = [] } = useGetParametersQuery(master.id, {
  skip: !master,
});

// 后续业务逻辑直接使用selectedParameters即可

方案2：若必须同步到State，添加内容比较逻辑 #

如果业务场景确实需要把结果同步到组件State，需在更新前判断内容是否真的变化，避免不必要的重渲染：

const selectedParameters = useGetParametersQuery(master.id, { skip: !master }).data || [];

useEffect(() => {
  // 浅比较数组内容（如果是复杂对象，需改用深比较）
  const isContentEqual = (arr1, arr2) => {
    if (arr1.length !== arr2.length) return false;
    return arr1.every((item, index) => item.id === arr2[index].id);
  };

  // 只有内容真的变化时才更新状态
  if (!isContentEqual(selectedParameters, parameters)) {
    setParameters(selectedParameters);
  }
}, [selectedParameters, parameters]);

如果数组元素是复杂对象，建议使用 Lodash 的 isEqual 做深比较，或者自行实现深比较逻辑。

额外检查点 #

确认 master.id 是否稳定：如果 master 对象每次渲染都是新引用（哪怕 id 值未变），会导致 useGetParametersQuery 重新发起请求，返回新的 data 数组。可以直接用 master?.id 作为查询参数，或者将 master.id 提取为单独变量，确保其引用稳定性。

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