useState 在合成事件中是異步的

合成時間是什么呢

合成事件： 簡單來說 比如onClick，或者 onChange 或者說是 Input之類的事件

所以一個情景是這樣的

當你在onClick 中這樣設置了狀態，并賦值上去，但是打印的值是上一次的值。

附代碼一份

function App() {const [state, setstate]: {} = useState(0);const count: number = 0;const setT = () => {setstate(++count);console.log(state)};return (<div><button onClick={setT}>點擊+1</button></div>); }

這時候打印出來的state 是0 并不是1

怎么解決呢

我這里使用自定義Hooks 來解決，實現方式是這樣

function App() {const [state, setstate]: {} = useState(0);const count: number = 0;// 自定義hooksconst useSyncCallback = callback => {const [proxyState, setProxyState] = useState({ current: false });const Func = useCallback(() => {setProxyState({ current: true });}, [proxyState]);useEffect(() => {if (proxyState.current === true) {setProxyState({ current: false });}}, [proxyState]);useEffect(() => {proxyState.current && callback();});return Func;};const func = useSyncCallback(() => {console.log(state);});const setT = () => {setstate(++count);func()};return (<div><button onClick={setT}>點擊+1</button></div>); }

今天是2022年1月31日補充

function App() {const [state, setstate]: {} = useState(0);const count: number = 0;const setT = () => {setstate(++count);console.log(state, '這里是SetT'); // 這里打印出來的是舊值，獲取不到最新的}; useEffect(() => {console.log(state, '最新的state'); // 這里便能夠打印最新的state }, [state])return (<div><button onClick={setT}>點擊+1</button></div>); }

總結

以上是生活随笔為你收集整理的React中 useState在合成事件中是异步的，怎么获取到useState 设置后的最新值，或者说setState中获取到最新值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。