目錄

一、問題描述

二、解決方案

方案一，使用函數式更新

方案二，使用 useRef 保存最新值

---

一、問題描述

在 React 中，當在?setInterval或setTimeout?中使用?setState?時，經常會遇到狀態不是最新值的問題。這是因為閉包導致的，setInterval 回調函數捕獲的是初始狀態值。

二、解決方案

方案一，使用函數式更新

useEffect(() => {const interval = setInterval(() => {// 使用函數式更新，獲取最新的狀態setCount(prevCount => prevCount + 1);}, 1000);return () => clearInterval(interval);
}, []);

方案二，使用 useRef 保存最新值

import { useState, useEffect, useRef } from 'react';function Counter() {const [count, setCount] = useState(0);const countRef = useRef(count);// 保持 ref 與狀態同步useEffect(() => {countRef.current = count;}, [count]);useEffect(() => {const interval = setInterval(() => {// 通過 ref 獲取最新值setCount(countRef.current + 1);}, 1000);return () => clearInterval(interval);}, []);return <div>計數: {count}</div>;
}

以上解決方案可解此問題。