在子组件useEffect中用setInterval更新父子状态的解决方案

问题场景 #

使用Material-UI的CircularProgress组件配合自定义RefreshTimer组件，通过setInterval实现圆形进度条的动画效果：每次间隔后更新进度值，当进度达到100时重置进度，并通过回调通知父组件执行刷新操作。但当前实现触发了React的常见警告：

Warning: Cannot update a component (App) while rendering a different component (RefreshTimer).

现有代码片段如下：

App组件 #

export default function App()  {
  const [refreshFlag, setRefreshFlag] = useState(false);

  const handleRefresh = useCallback(() => {
    setRefreshFlag(!refreshFlag);
    console.log('setting refresh flag?!?');
  }, [refreshFlag]);
    
  useEffect(() => {
    console.log('trigger App refresh!');
  }, [refreshFlag]);

  return(<div>
      <RefreshTimer handleRefresh={handleRefresh}/>
  </div>)
}

RefreshTimer组件 #

export default function RefreshTimer({handleRefresh}) {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => {
        if( prevProgress >= 100 ) {
          handleRefresh(true);
          return 0;
        } else {
          return prevProgress + 10;
        }
      });
    }, (REFRESH_RATE*1000/10));
    return () => {
      clearInterval(timer);
    };
  });

  return <CircularProgressWithLabel value={progress} />;
}

警告原因 #

问题出在setProgress的更新回调函数中直接调用了handleRefresh——这个回调属于React渲染阶段的逻辑，而handleRefresh会触发父组件App的状态更新，导致父组件在子组件渲染过程中重新渲染，违反了React的渲染阶段不可触发组件更新的规则，因此抛出警告。

最优设计方案 #

方案1：将父组件回调移出渲染阶段 #

通过useEffect监听进度值的变化，当进度达到100时再调用父组件的回调，确保回调执行在渲染完成后的副作用阶段，避免触发警告。

修改后的RefreshTimer组件：

export default function RefreshTimer({handleRefresh}) {
  const [progress, setProgress] = useState(0);
  const isFirstRender = useRef(true);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => {
        if( prevProgress >= 100 ) {
          return 0;
        } else {
          return prevProgress + 10;
        }
      });
    }, (REFRESH_RATE*1000/10));
    return () => {
      clearInterval(timer);
    };
  }, []); // 添加空依赖数组，避免重复创建定时器

  // 监听进度重置，触发父组件回调
  useEffect(() => {
    if (progress === 0 && !isFirstRender.current) {
      handleRefresh(true);
    }
    isFirstRender.current = false;
  }, [progress, handleRefresh]);

  return <CircularProgressWithLabel value={progress} />;
}

方案2：状态提升+逻辑集中 #

如果定时器和进度管理的逻辑需要和父组件的状态强关联，将定时器和进度状态都提升到父组件，子组件仅负责接收进度值并渲染CircularProgress。这种模式能让状态流转更清晰，避免跨组件的副作用冲突。

修改后的代码示例：

// App组件
export default function App()  {
  const [refreshFlag, setRefreshFlag] = useState(false);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          setRefreshFlag(prev => !prev);
          return 0;
        }
        return prev + 10;
      });
    }, (REFRESH_RATE*1000/10));
    return () => clearInterval(timer);
  }, []);

  useEffect(() => {
    console.log('trigger App refresh!');
  }, [refreshFlag]);

  return(<div>
      <CircularProgressWithLabel value={progress} />
  </div>)
}

方案3：封装自定义Hook复用逻辑 #

将定时器、进度管理的逻辑封装成自定义Hook，既保持组件职责单一，又能复用逻辑。示例：

// useRefreshTimer.js
export function useRefreshTimer(refreshRate, onRefresh) {
  const [progress, setProgress] = useState(0);
  const isFirstRender = useRef(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          return 0;
        }
        return prev + 10;
      });
    }, (refreshRate * 1000) / 10);

    return () => clearInterval(interval);
  }, [refreshRate]);

  useEffect(() => {
    if (progress === 0 && !isFirstRender.current) {
      onRefresh();
    }
    isFirstRender.current = false;
  }, [progress, onRefresh]);

  return progress;
}

// 使用示例
// App组件
export default function App()  {
  const [refreshFlag, setRefreshFlag] = useState(false);
  const progress = useRefreshTimer(REFRESH_RATE, () => setRefreshFlag(prev => !prev));

  useEffect(() => {
    console.log('trigger App refresh!');
  }, [refreshFlag]);

  return(<div>
      <CircularProgressWithLabel value={progress} />
  </div>)
}

// CircularProgressWithLabel仅负责渲染
export function CircularProgressWithLabel({value}) {
  return <CircularProgress value={value} />;
}

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