码迷,mamicode.com
首页 > 其他好文 > 详细

React Native(十一)——删除事件以及刷新列表

时间:2017-12-06 14:30:52      阅读:745      评论:0      收藏:0      [点我收藏+]

标签:lis   react   order   play   就是   比较   href   res   pre   

        需求:删除列表中的某一项,但不刷新整个页面,底下的数据顺势而上(第一张是原始数据,第二张是删除掉“你会介今年”这条动态后显示的数据)。

技术分享图片

技术分享图片

        中间的过程比较曲折,只因为刚开始的时候自己只想着实现功能,却没考虑到适应之前版本原有的效果,于是就有了三个版本的实现方法:

let listdata = await deldata(item.id);//请求删除接口返回的数据 
let list = this.state.list;//原有列表数据

let newlist = new Array();//fsdfks 为空数组,存放删除后剩下的数据组成的新数据

this.setState({ list: newlist });//list为动态列表的数据集合,重新赋值

①版本一:

this.setState({ list: newlist });//list为动态列表的数据集合,重新赋值
                                //在循环中使用setState赋值,总是导致页面一闪一闪,不稳定

技术分享图片

②版本二

//调用删除接口直接返回后再调用刷新页面的方法,导致的后果就是真个页面都刷新了,与之前要求的删除某一条数据只是让它在动态列表消失不见(并非刷新整个页面)的愿景背道而驰

技术分享图片

Refresh ===>为全局函数,刷新整个页面的作用。

技术分享图片

③版本三

//使用js中的splice方法,并把赋值一句放在整个循环的外层

技术分享图片

技术分享图片

纵览:经过一番波折最终实现了需求,虽然没能一次到位,但依旧从中学到了点。

继续加油~

React Native(十一)——删除事件以及刷新列表

标签:lis   react   order   play   就是   比较   href   res   pre   

原文地址:http://www.cnblogs.com/zhengyeye/p/7992236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!