reacthooksuseState更新数据不及时问题及处理
数据更新有延时不能及时获取:
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异步等待获取数据都不能及时更新
reacthooks理解
解决⽅案:
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内能获取到更新完的数据