react hooks useState更新數據不及時問題及處理

數據更新有延時不能及時獲取：

const [state, setState] = useState({
     num: 0
});

// 直接更新數據
const doing = () => {
    setState({
        num: 1
    })
    console.log(state); // { num: 0 } 數據未更新
}

// 使用函數返回更新數據
const doing = () => {
    setState(() => {
        ...
        return { num: 1 }
    })
    console.log(state); // { num: 0 } 數據未更新
}

// 使用async/await異步等待獲取
const doing = async () => {
    await setState(() => {
        ...
        return { num: 1 }
    })
    console.log(state); // { num: 0 } 數據未更新
}

doing()

　　調試發現直接更新數據、使用函數返回更新數據、使用async/await異步等待獲取 數據都不能及時更新

解決方案：

const [state, setState] = useState({
     num: 0
});

// 直接更新數據
const doing = () => {
    setState({
        num: 1
    })
    console.log(state); // { num: 0 } 數據未更新
}

doing()

useEffect(() => {
     console.log(state); // { num: 1 } 數據已更新
}, [state])

　　Effect Hook 可以讓你在函數組件中執行副作用操作，給useEffect鈎子傳遞第二參數[state]偵聽數據變化執行鈎子函數，在useEffect內能獲取到更新完的數據