React使用setInterval时触发无法对已卸载组件更新状态警告如何解决？

你代码的问题出在useEffect的清理函数中额外执行了setProgress(null)操作。
当组件触发卸载时，会优先执行useEffect返回的清理函数，此时组件已经进入卸载流程，你在清理函数中调用setProgress更新状态，就触发了「无法在已卸载组件上执行状态更新」的警告。你已经正确清理了定时器，多余的状态更新操作才是报错的直接原因。

直接删除useEffect清理函数中的setProgress(null)即可，修改后的useEffect逻辑如下：

useEffect(() => {
  const timer = setInterval(() => {
    setProgress((oldProgress) => {
      if (oldProgress === 100) {
        return 0;
      }
      const diff = Math.random() * 10;
      return Math.min(oldProgress + diff, 100);
    });
  }, 500);
  return () => {
    clearInterval(timer);
  };
}, []);

• 组件卸载后对应的状态本身会被垃圾回收机制销毁，不需要手动在清理函数里重置状态，这个操作完全是多余的。
• 修改后定时器会在卸载时被正常清理，不会再有后续的状态更新操作，警告会彻底消失。

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