react使用antd-design中select不能及时刷新问题及解决

 更新时间:2024年03月22日 09:39:02   作者:Emotion#  
这篇文章主要介绍了react使用antd-design中select不能及时刷新问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

react使用antd-design中select不能及时刷新

react是当前最流行的js框架之一,与之相匹配的antd也是当下最流行的ui框架之一,最近开发遇到一个之前没有遇到的问题,关于antd的select刷新不及时的问题,

当时的业务环境是具有多个商务录单,主播选择的业务.每个录单的平台不同主播也不一样,主播集合是采用的循环渲染形式.

因此由于是采用的ts的写法,每次的select中要进行预渲染,每次更改当前平台,对应的下拉不能及时更新,加key不行,setAnchor(anchor)不行,在useEffect()中监听anchor也不行,后来使用深拷贝内存地址更替变量才引起视图刷新,由于react写的不多,第一次遇见特此记录一下.

react异步数据更新不及时问题

最近在学习react的过程中,遇到了个问题,当我使用useState这个hook的时候,发现我们这个方法更新数据他是异步更新的,数据不会及时同步上我们的页面,在仔细的研究下

解决方法

const [value,setValue] = useState([]);
const changeValue = ()=>{
    setValue(data)
    console.log(value) //在此处输出会出现不及时更新问题,不会同步到页面上
}
 
//利用useEffect这个hook来监听数据的变化再去输出或者是调用
useEffect(()=>{
    console.log(value)//这样就可以解决更新不及时的问题啦
},[value])

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

  • 解决React报错Invalid hook call

    解决React报错Invalid hook call

    这篇文章主要为大家介绍了React报错Invalid hook call解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 教你react中如何理解usestate、useEffect副作用、useRef标识和useContext

    教你react中如何理解usestate、useEffect副作用、useRef标识和useContext

    这篇文章主要介绍了react中如何理解usestate、useEffect副作用、useRef标识和useContext,其实与vue中的ref和reactive一样,通过useState获取到的数据可以实现组件视图实时交互,而普通定义的数据仅仅在业务中使用,需要的朋友可以参考下
    2022-11-11
  • react实现浏览器自动刷新的示例代码

    react实现浏览器自动刷新的示例代码

    这篇文章主要介绍了react实现浏览器自动刷新的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • react中使用useEffect及踩坑记录

    react中使用useEffect及踩坑记录

    这篇文章主要介绍了react中使用useEffect及踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • React实现Vue的watch监听属性方式

    React实现Vue的watch监听属性方式

    这篇文章主要介绍了React实现Vue的watch监听属性方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React开启代理的2种实用方式

    React开启代理的2种实用方式

    最近有不少伙伴询问react的代理配置,自己也去试验了一下发现不少的问题,在这就将所遇到的心得分享出来,这篇文章主要给大家介绍了关于React开启代理的2种实用方式的相关资料,需要的朋友可以参考下
    2021-07-07
  • react结合typescript?封装组件实例详解

    react结合typescript?封装组件实例详解

    这篇文章主要为大家介绍了react结合typescript?封装组件实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • React Hooks的深入理解与使用

    React Hooks的深入理解与使用

    这篇文章主要介绍了React Hooks的深入理解与使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • React?+?Typescript领域初学者的常见问题和技巧(最新)

    React?+?Typescript领域初学者的常见问题和技巧(最新)

    这篇文章主要介绍了React?+?Typescript领域初学者的常见问题和技巧,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • React自定义视频全屏按钮实现全屏功能

    React自定义视频全屏按钮实现全屏功能

    这篇文章主要介绍了React自定义视频全屏按钮实现全屏功能,通过绘制全屏按钮,并绑定点击事件,编写点击事件,通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-11-11

最新评论

?


http://www.vxiaotou.com