React--操作数组引起 state 状态变更未重新渲染解决方案

今天在编写react组件的工作中遇到了问题:
在state状态中存在这样一个数组arr,arr结构类似[{"src":".......","img":"......"}] 其中src是MP4格式的视频地址,img是视频的封面,主要需要完成的功能是对这样的数组进行排序和删除;然而在页面上操作排序的时候图片位置变换,而视频位置未动;state状态数据已变更
该问题解决过程记录:

  1. 在编写react的过程中,习惯了setState()的即时渲染,如setState({foo:1})的写法。setState方法是异步的,当管理大量组件等情况时可能会导致页面渲染结束了,而state状态还未同步完成。
  2. setState()方法可以传递第二个参数作为回调,回调中可以调用第一个参数中已经设置好的状态值如:

     this.state={foo:1};
    
     this.setState({foo:2},()=>{
    
        console.log(this.state.foo);//2
    
    });

    3.所以我将arr的值给一个变量arr1;再清空state状态的arr;在回调中操作arr1最后给state状态的arr数组保证页面能完成渲染

总结:
即时渲染在处理简单的数据结构时能够立即完成类页面同步渲染,然而当复杂的数据或者需要加载较大较多浏览器组件(如视频播放)时建议使用回调函数来确保页面同步渲染

(以上都是自己的个人看法,不一定正确,欢迎指正)

fish_szw
讨论数量: 1
Summer

专门为这篇文章开了个社区 :sweat_smile:

1周前 评论
02040402: Next: Angular 1周前
fish_szw: 最近看完了您的开发实战入门,觉得附言部分提到的写作习惯对我很有启示,就决定记录下学习和工作中的难题和心得,故有此篇😂,总之感谢大佬的付出,对我帮助很大:+1: 1周前
Summer: @02040402 你去写篇 Angular 我来开 1周前
Summer: @fish_szw 写作是个好习惯,要坚持哈,欢迎到 技术写作 论坛首页 来分享写作技巧 1周前
02040402: @summer 博客:八个久经考验的理由,你该在下个项目中使用 Angular 八个久经考验的理由,你该在下个项目中使用 Angular 1周前
02040402: @Summer 佩服!说到做到!我是为了让你加现写的:D 不愧是Summer,恭敬! 1周前
Summer: @02040402 反正都会弄哈,你能换个用户名不? 1周前
02040402: @Summer 数字不好打哈~ 1周前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!