标签：10 console log hooks React state const data

状态

 

 

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,log,hooks,React,state,const,data
来源： https://www.cnblogs.com/HelloLc/p/16587847.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。