hooks中,useState異步問題解決方案

問題描述:

      在hooks中,修改狀態的是通過useState返回的修改函數實現的.它的功能類似於class組件中的this.setState().而且,這兩種方式都是異步的.可是this.setState()是有回調函數的,那useState()呢?

問題點:

   1.它異步且沒有回調函數

 可以看到,iii並沒有被打印,也就是說賦值之后並沒有回調函數提供操作空間.而test也是修改前的值,並不是修改后的.也就是說修改操作雖然在打印前面,但由於它是異步,所以晚於同步的打印操作.故只打印了賦值前的值

解決方案:

   結合useEffect進行監聽:一句話概括,我不需要知道你設置完成沒有.只要useEffect監聽到你值變化了,我再進行操作.

   所以,只需要在上面的代碼上進行監聽就行.

可以看到,這里就打印了兩次,一次是默認的第一次,一次是更改之后的.至少拿到了更改之后的值.然后適當加一點判斷就可以只操作更改之后的了.

const [test,setTest] = useState(1)
    const init=()=>{
        setTest(2)
        console.log('jjjj',test)
    }
  useEffect(()=>{
      init()
      if(test!==1){
          //此處類似成功的回調函數
        console.log('kkk',test)
      }
  },[test])

 注意點:useEffect監聽對象、數組的時候,默認執行里面的函數的,也就是說,它會無限執行.具體解決方案.參考我的另一篇博客:useEffect的無限調用