状态
const View:React.FC = (props)=>{
const [data,setDate] = useState<any[]>(0);
console.log(data)//10
const handleDiv = ()=>{
setDate(10);
console.log(data)//0
}
return(
<div onClick={handleDiv}>值:{data}</div>
)
}
从上面代码中,能看得出来,为什么触发了handleDiv后,上面的console的data值为10,而函数里面的data值为0呢
其实,state是异步执行的,所以数据不会及时更新,那么有什么解决的办法呢?
有人说,直接让state从异步改成同步不就好了....貌似可以,但我没试过,哈哈哈
既然用React开发了,那我们可以使用React自带的ref来解决数据更新不及时的问题
有人有会说,ref能解决?啊对对,跳过闲话........
其实React的ref是可以用来存储数据的,那怎么使用呢?看代码
import { Ref } from 'react';const View:React.FC = (props)=>{
const data = Ref();
console.log(data)//undefined
const handleDiv = ()=>{
data.current = 10;
console.log(data)//10
}
return(
<div onClick={handleDiv}>值:{data}</div>
)
}
啊哈,这下又有人问了,为什么data是个undefined嘞
其实啊,未赋值之前打印data,都是undefined,赋值后立马更新数据,多好用
也可以理解为,state用来做异步,Ref用来做同步,舒服的一批也
标签:10,console,hooks,React,state,const,data From: https://www.cnblogs.com/HelloLc/p/16587847.html