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])

通過添加判斷條件，我們可以讓想要執行的代碼只執行一次