React useEffect配置依赖数组后触发无限请求循环问题求助

算力阿峰

2026-9-25

问题原因

无限循环是依赖项配置错误直接导致的：

useEffect 依赖数组中包含了 getSingleClient 这个状态变量
每次useEffect执行时都会调用setGetSingleClient更新该状态，状态更新后又会触发依赖它的useEffect重新运行，形成无限循环、频繁发请求的问题。

解决方案

直接把getSingleClient从依赖数组中移除即可，你的拉取逻辑只需要在路由参数id变化时触发即可，修改后代码如下：

const [getSingleClient, setGetSingleClient] = useState({});
useEffect(() => {
  const GetClient = async () => {
    const clientData = await GetSingle(`${id}`);
    setGetSingleClient(clientData);
  };
  GetClient();
}, [id]);

优化建议

可以增加请求取消逻辑，避免组件卸载后异步请求完成调用setState产生的内存泄漏警告：

const [getSingleClient, setGetSingleClient] = useState({});
useEffect(() => {
  const abortController = new AbortController();
  const GetClient = async () => {
    try {
      const clientData = await GetSingle(`${id}`, {
        signal: abortController.signal
      });
      setGetSingleClient(clientData);
    } catch (err) {
      // 忽略主动取消的请求错误
      if (err.name !== 'AbortError') {
        console.error('拉取客户端数据失败：', err);
      }
    }
  };
  GetClient();
  // 组件卸载/依赖变化时取消未完成的请求
  return () => abortController.abort();
}, [id]);