如何避免React useEffect中的无限循环问题？

核心诱因分析 #

你的代码出现无限循环，大概率是以下几个原因导致：

1. 状态修改函数触发重渲染循环 #

useEffect中调用的getFromNewStatuses、getFromWorkStatuses等函数，如果内部修改了组件状态（比如调用setState或dispatch修改Redux状态），会触发组件重渲染。若重渲染后statuses的引用或内容发生变化，会再次触发useEffect，形成循环。

2. 渲染阶段触发状态更新 #

getButtonActionsByStatus函数如果在组件渲染时被调用（比如直接在JSX中使用），其内部调用的getFromXXStatuses(onClick)若包含状态修改逻辑，会违反React规则——渲染阶段不允许修改状态，直接导致无限重渲染循环。

3. statuses引用不稳定 #

如果Redux返回的state.refMaterial.data.statuses是每次请求都生成的新对象（即使内容不变），useAppSelector会认为值已变化，触发组件重渲染，进而重复执行useEffect。

分步解决方案 #

步骤1：检查并修正状态修改逻辑 #

• 打开getFromNewStatuses等四个函数的实现，移除内部的状态修改代码（比如setState、dispatch操作）。如果这些函数需要更新状态，应该改为仅返回计算结果，然后在useEffect或事件回调中根据结果更新状态，而非在函数内部直接修改。
• 示例修正：

  // 原错误写法（内部修改状态）
  const getFromNewStatuses = () => {
    setSomeState(xxx); // 直接修改状态
  };
  
  // 修正后（返回计算值，外部处理状态更新）
  const getFromNewStatuses = () => {
    return xxx; // 返回计算结果
  };
  
  // 在useEffect中处理状态更新
  useEffect(() => {
    if (!statuses) return;
    const newData = getFromNewStatuses();
    if (newData !== someState) {
      setSomeState(newData);
    }
  }, [statuses, someState]);
  

步骤2：禁止渲染阶段修改状态 #

• 检查getButtonActionsByStatus的调用场景：如果它被直接用在JSX中（比如{getButtonActionsByStatus(handleClick)}），需要将内部的getFromXXStatuses(onClick)逻辑移到useEffect或useCallback中，避免渲染时触发状态更新。
• 示例修正：

  // 用useCallback缓存回调，避免每次渲染重新创建
  const handleButtonActions = useCallback((onClick) => {
    if (!requiredNames) return [];
    let actions = [];
    switch (currentStatus) {
      case requiredNames.newStatus:
        actions = fromNew;
        break;
      case requiredNames.inWork:
        actions = fromWork;
        break;
      // 其他case...
    }
    // 将状态修改逻辑移到事件回调中，而非渲染阶段
    actions.forEach(action => {
      action.onClick = () => {
        onClick();
        getFromNewStatuses(); // 仅在点击时执行状态修改
      };
    });
    return actions;
  }, [requiredNames, currentStatus]);
  

步骤3：稳定statuses的引用 #

• 使用shallowEqual优化useAppSelector的选择逻辑，确保只有当statuses的内容变化时才触发重渲染，而非引用变化就触发：

  import { shallowEqual, useAppSelector } from 'react-redux';
  
  const { statuses } = useAppSelector((state) => state.refMaterial.data, shallowEqual);
  

步骤4：避免不必要的setState调用 #

• 在useEffect中对比requiredNames的当前值与将要设置的值，仅当值不同时才调用setRequiredNames，减少不必要的重渲染：

  useEffect(() => {
    if (!statuses) return;
    const { inWork, hold, closed, newStatus } = getRequiredStatuses();
    const newRequiredNames = {
      inWork: inWork.alias,
      hold: hold.alias,
      closed: closed.alias,
      newStatus: newStatus.alias,
    };
    // 逐个字段对比，避免JSON.stringify的性能问题
    const isEqual = requiredNames && 
      requiredNames.inWork === newRequiredNames.inWork &&
      requiredNames.hold === newRequiredNames.hold &&
      requiredNames.closed === newRequiredNames.closed &&
      requiredNames.newStatus === newRequiredNames.newStatus;
    if (!isEqual) {
      setRequiredNames(newRequiredNames);
    }
    // 确保这里调用的函数不会修改状态
    getFromNewStatuses();
    getFromWorkStatuses();
    getFromHoldStatuses();
    getFromClosedStatuses();
  }, [statuses, requiredNames]);
  

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