React中useEffect内异步函数触发无限循环问题排查

核心问题根源 #

你遇到的无限循环是由两个关键问题导致的：

1. 双状态维护冲突：同时使用组件本地useState和Recoil全局状态，导致状态同步混乱，触发重复渲染。
2. useEffect依赖逻辑错误：将组件本地company设为effect依赖，在effect内调用setCompany更新它，形成“状态变化→effect触发→状态再变化”的循环。

分步解决方案 #

1. 移除组件本地状态，统一使用Recoil全局状态 #

组件无需维护本地company状态，直接读取Recoil的companyState.companyDetails即可，避免双状态同步问题：

// 移除本地useState，直接通过Recoil读取状态
const company = useRecoilValue(companyState.companyDetails);
const companyActions = useCompanyActions();
const searchParams = useSearchParams();
const navigate = useNavigate();

2. 调整useEffect执行逻辑，避免重复触发 #

将effect改为仅在组件挂载时执行一次，或用useRef标记已执行，防止循环：

const hasFetched = useRef(false);

useEffect(() => {
  // 标记已执行，避免重复触发
  if (hasFetched.current) return;
  hasFetched.current = true;

  if (!company) {
    const companyId = searchParams.get("companyId");
    if (companyId) {
      companyActions.getCompany(companyId).catch(() => {
        navigate('/portfolio');
      });
    } else {
      navigate('/portfolio');
    }
  }
}, []); // 空依赖数组确保仅挂载时执行一次

3. 修正getCompany的状态更新逻辑 #

在API请求后增加有效性判断，确保更新后的Recoil状态不为空，避免再次进入请求分支：

async function getCompany(companyId: string) {
  try {
    const result = await CalyxApi.companyApi().companyControllerGetCompany(companyId);
    
    // 先校验返回的公司数据是否有效
    if (!result.data?.company) {
      navigate('/portfolio');
      return;
    }

    setCompany((state) => ({
      ...state,
      companyProfile: result.data,
      companyDetails: result.data.company
    }));
    return result.data.company;
  } catch (e) {
    errorSuccessActions.throwError(e);
    navigate('/portfolio');
    return;
  }
}

关键注意事项 #

• 不要同时维护组件本地状态和Recoil全局状态，这是状态同步问题的常见诱因。
• 当需要仅执行一次的初始化逻辑时，优先使用空依赖数组的useEffect，配合useRef防止重复执行。
• API请求后必须校验返回数据的有效性，避免因无效数据导致状态持续为空，触发重复请求。

内容的提问来源于stack exchange，提问作者Lukas Luke Stateczny