React中setState数组变化,视图没有更新

    最近学习React,在数据变化的时候遇到一个坑,必须得说说。

原因一:

    做项目,一般都是先将路由配好,整个大的架子搭起来,再写里面的功能。我是做了一个公共的组件,在点击切换路由的同时还要setState更新数组,因为要给点击的div换张图片。类似这种:

image.png

    我运行后发现,每一个按钮必须点击两下,视图才更新,我将state数组console.log,发现点击第一次的时候,state数组也发生了变化,但是视图没有更新,尝试了很多办法,也没有解决问题。
image.png

附上代码,每次点击路由都会跳转。最后我尝试将路由给去掉,只保留点击事件,发现这时候是正常的,后来才明白,每次点击的时候,其实数组更新,视图还没有来的及渲染,路由切换,整个页面又重新渲染了一遍,而state数组也是原来的数据,所以造成了视图未更新的‘假象’。

原因二:

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容