React中useEffect因依赖函数触发无限循环问题求助

问题原因 #

你的代码里，handleLike是组件内部声明的普通函数，组件每次重新渲染时，都会生成一个全新的handleLike实例。而你把handleLike加入了useEffect的依赖数组，React会通过对比引用判断依赖是否变化——每次渲染handleLike的引用都不同，因此useEffect会被反复触发。

完整循环逻辑：

1. 组件渲染，创建新的handleLike函数
2. useEffect检测到依赖引用变化，执行内部的fetch函数
3. fetch调用setTweetLikes更新状态，触发组件重新渲染
4. 重新渲染再次生成新的handleLike，回到步骤1，形成无限循环

注意：即使你没在useEffect里执行handleLike，只要它在依赖数组中，React就会追踪其引用变化，这和是否执行该函数无关。

解决办法 #

方案1：用useCallback缓存函数引用 #

使用React.useCallback包裹handleLike，让它仅在依赖项变化时重新创建：

import { useCallback } from 'react';

// ...

const handleLike = useCallback(async () => {
  await likeTweet(tweet._id, user._id);
}, [tweet._id, user._id]); // 依赖数组包含handleLike内部用到的变量

useEffect(() => {
  const fetch = async () => {
    const response = await fetchLikes(tweet._id);
    setTweetLikes(response.data);
    console.log("useEffect");
  };
  fetch();
}, [handleLike, tweet._id]); // 补充fetch用到的tweet._id到依赖数组

方案2：移除不必要的依赖 #

如果useEffect的逻辑完全不需要handleLike，直接将它从依赖数组中移除：

useEffect(() => {
  const fetch = async () => {
    const response = await fetchLikes(tweet._id);
    setTweetLikes(response.data);
    console.log("useEffect");
  };
  fetch();
}, [tweet._id]); // 仅保留实际用到的依赖项tweet._id

额外提醒 #

React的依赖数组需要包含useEffect内部用到的所有外部变量/函数，否则可能出现闭包问题。可以配合ESLint的react-hooks/exhaustive-deps规则，自动检查依赖是否完整。

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