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 组件布局.组件与 ...
随机推荐
- php 从1加到100
<?php //1-100利用for循环1-100累加 $sum=0;//初始化sum值为0 for($i=1;$i<=100;$i++)//定义i,循环次数,一般求1-100的和,从1开 ...
- js 获取单选框和复选框的值和js dom方法给单选框和多选框赋值
获取单选框框值的方法 function getRadioRes(Name){ var rdsObj = document.getElementsByName(Name); var checkVal = ...
- Eclipse中配置resin 4.x
开发web项目时,你还困扰在,反复启动web容器的痛苦中么?也许会有人说,用调试模式.但是如果涉及到配置文件或者service类,还是不得不重启web容器吧,而且偶尔会出现抽风情况,没生效的情况(这时 ...
- qcom wlan kernel 解读 WCNSS_qcom_cfg.ini 文件
CORE/HDD/src/wlan_hdd_main.c 模块初始化: static int __init hdd_module_init ( void) { return hdd_driver_in ...
- 成功安装vscode中go的相关插件
让你成功安装vscode中go的相关插件 注意:该演示环境是windows环境,linux和mac环境操作思路一样 vscode中有很多go的相关插件,非常好用如下:gocodegopkgsgo-ou ...
- 第三百三十七节,web爬虫讲解2—PhantomJS虚拟浏览器+selenium模块操作PhantomJS
第三百三十七节,web爬虫讲解2—PhantomJS虚拟浏览器+selenium模块操作PhantomJS PhantomJS虚拟浏览器 phantomjs 是一个基于js的webkit内核无头浏览器 ...
- Java如何格式化月份?
在Java中,如何以MMMM格式格式化时间? 这个示例使用SimpleDateFormat('MMMM')构造函数和SimpleDateFormat类的sdf.format(date)方法来格式化月份 ...
- Ironic 安装和配置详解
转自:http://amar266.blogspot.com/2014/12/ironic-installation-and-configuration.html 1.Install Openstac ...
- at 命令
每天什么时候执形at 12:00 /every:Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday shutdown -r
- 使用 mysql_use_result 还是使用 mysql_store_result?
From: http://my.oschina.net/moooofly/blog/186456 本文整理了关于“使用 mysql_use_result 还是 mysql_store_result”的 ...