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数组保证页面能完成渲染

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

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

讨论数量: 1
Summer

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

6个月前 评论
02040402 6个月前
fish_szw (楼主) 6个月前
Summer (作者) 6个月前
Summer (作者) 6个月前
02040402 6个月前
02040402 6个月前
Summer (作者) 6个月前
02040402 6个月前

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