问题场景:
export default function demo(){
const [flag,setFlag] = useState(false)
return <div>
...
<div onClick={() => {
// 大致场景如下,即在dom层获取不到最新的state值
console.log(flag)
}}></div>
</div>
}
解决方案:useLatest
import { useLatest } from 'ahooks';
export default function demo(){
const [flag,setFlag] = useState(false)
const latestFlag = useLatest(flag)
return <div>
...
<div onClick={() => {
// latestFlag.current.flag永远是最新的 -- 亲测有效
console.log(latestFlag.current.flag )
}}></div>
</div>
}
20230531更新:
在使用中发现,在频繁的通过setState去更新flag的时候还是会出现拿不到最新值的场景
可以尝试使用useEffect监听变量更新,然后通过使用useSetState来更新state
const [state,setState] = useSetState({
currentFlag:false
})
useEffect(() => {
setState({
currentFlag:flag
})
},[flag]
)