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


中间的过程比较曲折,只因为刚开始的时候自己只想着实现功能,却没考虑到适应之前版本原有的效果,于是就有了三个版本的实现方法:
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(十一)——删除事件以及刷新列表的更多相关文章
- React Native(十一)——按钮重复点击事件的处理
最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题 ...
- React Native 之FlatList 下拉刷新和上拉加载更多
接上一篇代码: 只修改了FlatListDemo.js里面的代码 import React, {Fragment,Component} from 'react'; import { SafeAreaV ...
- React Native 让组件做到局部刷新
利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢? ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- React 点击删除列表中对应项(React 获取DOM中自定义属性)
点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...
- React Native 列表的总结
React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件.这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有 ...
- react native 刷新机制----通知
在项目中,不知道大家有没有遇到这样的一个问题,比如说有两个页面A,B.A页面中有某个按钮点击后可以跳转到B页面,现在有一个需求就是,我在B页面中做了某些操作,然后点击回退按钮,回到A页面,A页面中的数 ...
- React Native学习(七)—— FlatList实现横向滑动列表效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
随机推荐
- Wireshark 抓包小例子
捕捉过滤器(CaptureFilters): 用于决定将什么样的信息记录在捕捉结果中. 语法详见:http://www.cnblogs.com/SZxiaochun/p/7920962.html 显示 ...
- Spring JDBC StoredProcedure类示例
org.springframework.jdbc.core.StoredProcedure类是RDBMS存储过程的对象抽象的超类.这个类是抽象的,目的是让子类将提供一个用于调用的类型化方法,该方法委托 ...
- 嵌入式开发之zynq---Zynq PS侧sd驱动
http://blog.chinaunix.net/uid-29404121-id-4217026.html http://blog.chinaunix.net/uid-29709984-id-430 ...
- 多媒体开发之rtmp---rtmp client 端的实现
去年我就在流媒体朋友圈认识winlin 老乡,本来想参与srs的开发,可惜今年5月份身体不好,今天想起rtmp 做直播,有翻到老乡的博文如下: http://blog.csdn.net/win_lin ...
- Win10尝鲜体验——初识传说中不一样的Windows 分类: 资源分享 2015-07-24 18:27 13人阅读 评论(0) 收藏
这几天,网上传来一个消息,虽然不知是好是坏,Win10可以下载安装了! 出于好奇,下载尝鲜,几个截图,留作纪念~ 中文,还是要好好支持的,毕竟中国有如此多的用户 可选的安装版本 许可条款也刚刚出炉,估 ...
- 使用nginx反向代理解决前端跨域问题
1. 首先去Nginx官网下载一个最新版本的Nginx,下载地址:http://nginx.org/en/download.html.我这里下载的版本是:nginx/Windows-1.12.0.下载 ...
- UNIX环境编程学习笔记(27)——多线程编程(二):控制线程属性
lienhua342014-11-09 1 线程属性概括 POSIX 线程的主要属性包括 scope 属性.detach 属性.堆栈地址.堆栈大小.优先级.在头文件 pthread.h 中定义了结构体 ...
- 关系型数据库 和 非关系型数据对比 以及 MySQL与Oracle对比
一.关系型数据库 关系型数据库,是指采用了关系模型来组织数据的数据库. 关系模型1970年提出的,关系模型的概念得到了充分的发展并逐渐成为主流数据库结构的主流模型. 简单来说,关系模型指的 ...
- level1 - unit 1 - 句子结构
preface 学习英语做为一种爱好,就是希望有一天能够和老外流畅沟通,目前来看,日常沟通还是没有问题的和我的外教. 知识日积月累,现在就把以前学习的(从初中到现在)知识总结下.每天一更,更到单元总结 ...
- Timeout in android httpclient
原文: http://www.cnblogs.com/codingmyworld/archive/2011/08/17/2141706.html /* 从连接池中取连接的超时时间 */ConnMana ...