在useEffect的setInterval内调用setState时UI更新异常如何解决

• 你写的useEffect没有传入空依赖数组，这会导致每次组件重新渲染都会重新执行useEffect回调，新增一个定时器，最终会同时存在多个定时器并行修改abc状态，自然会出现更新异常的问题，和setState异步特性无关。
• 没有写定时器的清理逻辑，组件卸载后定时器还会继续执行，会引发内存泄漏。

const [abc, setAbc] = useState("");
const xyz = "aaa";
useEffect(() => {
  // 保存定时器ID用于后续清理
  const timer = setInterval(() => {
    setAbc((prev) =>
      prev.length !== xyz.length ? prev + xyz[prev.length] : ""
    );
  }, 1000);
  // 返回清理函数，组件卸载/依赖变更时清除旧定时器
  return () => clearInterval(timer);
}, []); // 空依赖数组保证useEffect只在组件挂载时执行一次

如果xyz是会动态变化的变量，记得把xyz加到useEffect的依赖数组里，这样xyz更新的时候会自动清理旧定时器，用新的xyz值重新启动定时器即可。

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