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内能获取到更新完的数据