react hooks useState更新数据不及时问题及处理

数据更新有延时不能及时获取：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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 } 数据未更新 }<br><br>doing()

　　调试发现直接更新数据、使用函数返回更新数据、使用async/await异步等待获取 数据都不能及时更新

解决方案：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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