React hooks useState異步問題及解決
React Hooks useState異步問題
最近在開發中遇到一個問題 我接口請求回來的數據 用useState存儲起來。
但是我後面 去改變這個數據的時候每次拿到都是上次的數據沒辦法及時更新。
原因
useState 返回的更新狀態方法是異步的,要在下次重繪才能獲取新值。不要試圖在更改狀態之後立馬獲取狀態。
解決方法
應該使用useRef 存儲這個數據,在useEffect裡監聽data的變化
const dataRef = useRef() const [data,setData] = useState[{}] useEffect(() => { dataRef.current = data }, [data])
當我們想使用當前的數據的時候直接用dataRef.current 獲取的就是當前最新的數據
console.log(dataRef.current)//最新的數據
React中useState異步更新小坑
問題:
在hooks中,修改狀態的是通過useState返回的修改函數實現的.它的功能類似於class組件中的this.setState().而且,這兩種方式都是異步的.可是this.setState()是有回調函數的,那useState()呢?
問題點
它異步且沒有回調函數
const [count,setCount] = useState(1) useEffect(()=> { setCount(2,()=>{ console.log('測試hooks的回調'); }) console.log(count); },[])
可以看到提示 “State updates from the useState() and useReducer() Hooks don’t support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().”
是不支持回調函數的形式的。因為setCount是異步的,所以打印count是在改變count之前的。
如果我們想要在打印的時候就拿到最新的值,那麼我們可以通過setCount的第二個參數指定依賴項
const [count,setCount] = useState(1) useEffect(()=> { setCount(2) console.log(count); },[count])
當count發生變化的時候,useEffect就會再次相應,但是這樣就會有個問題,當count從1變為2的時候useEffect的回調函數會再次執行,就會分別打印1,2兩次。
useEffect(()=> { let currentValue = null setCount((preVal)=>{ currentValue=preVal return 2 }) if(currentValue!==count){ console.log(count); } },[count])
通過添加判斷條件,我們可以讓想要執行的代碼隻執行一次
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 如何解決React useEffect鉤子帶來的無限循環問題
- react使用useState修改對象或者數組的值無法改變視圖的問題
- 詳解如何構建自己的react hooks
- React 小技巧教你如何擺脫hooks依賴煩惱
- 30分鐘帶你全面瞭解React Hooks