React项目接入Contentful时API高频重复调用问题排查

算力阿峰

2026-8-31

问题根因

核心诱因是第一个useEffect未传入依赖数组。React对无依赖数组的useEffect默认执行逻辑是：组件每完成一次渲染，就执行一次effect回调。你在effect回调里触发API请求，拿到结果后调用setAboutTypes更新组件状态，状态变更会触发组件重渲染，重渲染完成后又会再次执行无依赖的effect回调，直接形成「发请求→更新状态→重渲染→再发请求」的死循环，这就是API毫秒级重复调用的直接原因。
isMounted状态标记的用法完全失效。你写的isMounted判断逻辑在无依赖effect中，每次重渲染时isMounted初始值为true，根本拦不住请求执行；而修改isMounted为false的逻辑写在第二个effect的清理函数里，这个清理函数只有组件完全卸载时才会触发，组件正常重渲染流程中根本不会执行，完全起不到拦截作用。
第一个effect的清理函数写法无效。effect返回的函数是专门用来清理副作用的，你返回的() => <></>是JSX片段，没有任何实际清理作用。
额外冗余逻辑：组件卸载时手动把aboutTypes置为null没有意义，React会在组件卸载后自动回收对应状态内存，不需要手动重置。

修正方案

删除冗余的isMounted状态、多余的第二个重置状态的useEffect，给请求逻辑所在的useEffect传入空依赖数组[]，保证请求逻辑只在组件首次挂载时执行一次。
用普通闭包变量做卸载标记，解决组件卸载后异步请求回调更新状态导致的内存泄漏警告即可，不需要把这个标记做成响应式状态。

修正后的组件代码如下：

const [aboutTypes, setAboutTypes] = useState([]);
const { getAboutTypes } = useContentful();

useEffect(() => {
  // 普通闭包变量标记组件是否卸载，不需要做成状态
  let isUnmounted = false;

  const fetchData = async () => {
    const response = await getAboutTypes();
    // 组件未卸载时才更新状态，避免内存泄漏
    if (!isUnmounted && response) {
      setAboutTypes(response);
    }
  };

  fetchData();

  // 组件卸载时更新标记
  return () => {
    isUnmounted = true;
  };
// 空依赖数组，确保effect仅在组件首次挂载时执行一次
}, []);

如果遇到ESLint提示getAboutTypes缺少依赖的问题，可以在useContentful.js中用useCallback包裹方法固定引用，避免方法引用随渲染变化导致effect意外重执行，优化后的useContentful相关代码如下：

import { useCallback } from 'react';

// client初始化逻辑保持不变

const getAboutTypes = useCallback(async () => {
  try {
    const entries = await client.getEntries({
      content_type: "aboutType",
      select: "fields",
    });

    const sanitizedEntries = entries.items.map((item) => {
      const typeImage = item.fields.typeImage.fields;
      return {
        ...item.fields,
        typeImage,
      };
    });

    return sanitizedEntries;
  } catch (error) {
    console.log(`Error: ${error}`);
  }
}, []); // 空依赖保证方法引用全程固定

return { getAboutTypes, getHerdMembers };

改完后Contentful API只会在组件首次挂载时请求一次，不会再出现循环重复调用的问题。

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