React中useEffect依赖respDc/editDc触发无限循环求最优解

你的问题核心在于每次组件渲染时，respDc和editDc都是通过JSON.parse生成的新数组引用——哪怕原始的responsable和editor字符串没有变化，这两个数组的引用也会更新，导致依赖它们的useCallback或useEffect反复触发，进而引发无限循环。

正确解决步骤 #

1. 用useMemo缓存解析后的数组：让respDc和editDc的引用仅在原始字符串responsable/editor变化时才更新，避免不必要的引用变更。
2. 稳定initFetch的引用（可选但推荐）：用useCallback包裹initFetch，依赖缓存后的数组和其他稳定值，确保只有必要时才重新创建函数。
3. 触发initFetch的useEffect依赖稳定值：确保useEffect仅在respDc/editDc真的变化时执行。

完整代码示例 #

const { user } = useAuth();  
const { responsable, editor, matricula } = user; 
const accessToken = // 你的accessToken获取逻辑，需确保引用稳定

// 用useMemo缓存解析结果，仅当原始字符串变化时重新解析
const respDc = useMemo(() => JSON.parse(responsable), [responsable]); 
const editDc = useMemo(() => JSON.parse(editor), [editor]);

// 用useCallback稳定initFetch的引用
const initFetch = useCallback(() => {
  for (let dc of respDc) {
    dispatch(getTopicsByDcResponsable({ dc, token: accessToken }));      
  }
  for (let dc of editDc) {
    dispatch(getTopicsbyDcentroEdit({ dc, token: accessToken }));
  }  
}, [respDc, editDc, accessToken, dispatch]); 

useEffect(() => {
  initFetch();  
}, [initFetch]);

简化版（无需useCallback） #

如果觉得useCallback多余，也可以直接把initFetch定义在useEffect内部，依赖缓存后的数组：

const { user } = useAuth();  
const { responsable, editor, matricula } = user; 
const accessToken = // 确保引用稳定

const respDc = useMemo(() => JSON.parse(responsable), [responsable]); 
const editDc = useMemo(() => JSON.parse(editor), [editor]);

useEffect(() => {
  const initFetch = () => {
    for (let dc of respDc) {
      dispatch(getTopicsByDcResponsable({ dc, token: accessToken }));      
    }
    for (let dc of editDc) {
      dispatch(getTopicsbyDcentroEdit({ dc, token: accessToken }));
    }  
  };
  initFetch();
}, [respDc, editDc, accessToken, dispatch]);

关键注意点 #

• 确保accessToken的引用稳定：如果accessToken是从上下文或状态获取的，要避免它无意义地更新，否则会额外触发useEffect。
• dispatch通常是稳定的（来自Redux的useDispatch或React Context的稳定函数），可安全加入依赖。

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