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 组件布局.组件与 ...
随机推荐
- 深入浅出 kvm qemu libvirt
在所谓的kvm技术中,应用到的其实有2个东西:qemu+kvmkvm负责cpu虚拟化+内存虚拟化,实现了cpu和内存的虚拟化,但kvm不能模拟其他设备:qemu是模拟IO设备(网卡,磁盘),kvm加上 ...
- java不确定参数个数方法例子
package test; public class myTest { // 根据输入的参数动态生成数组 public static int max(int... param) { int max = ...
- Linux C++ 访问子目录以及里面的文件
#include <iostream> #include <fstream> #include <string> #include <vector> # ...
- JDBC结果集
SQL语句执行后从数据库查询读取数据,返回的数据放在结果集中. SELECT语句用于从数据库中选择行并在结果集中查看它们的标准方法. java.sql.ResultSet接口表示数据库查询的结果集. ...
- e834. 设置JTabbedPane中卡片的位置
The tabs of a tabbed pane can be placed on one of the four edges of its container. By default, when ...
- 利用smba实现windows上写程序,linux上运行
1.在linux下载程序代码(确保获取正确的文件属性) 2.在windows编写代码,对于已有代码,不改变文件权限,如原先为755的,更改文件内容后依然是755的文件,如果要新建文件,默认为644,其 ...
- 使用OpenSSL创建自己的CA root certificate
在密码学中,CA(Certificate Authority,认证机构)是指一个被多个用户信任的机构,该机构能够创建和指派公钥证书. 为规范起见,我们先介绍本文可能涉及的术语, asymmetric ...
- Linux中mkdir和touch命令区别
一.目的 本文将介绍linux下新建文件或文件夹.删除文件或文件夹命令. touch能够新建文件,mkdir用来新建文件夹.rm用来删除文件或文件夹. 本文将选取ubu ...
- 和我一起学《HTTP权威指南》——客户端识别与cookie机制
客户端识别与cookie机制 服务器需要区别是哪个客户端. 个性化接触 HTTP是匿名.无状态的请求/响应协议. Web站点希望: 对客户端的用户有更多的了解 追踪用户浏览页面的行为 因此,产生了几种 ...
- Windbg在软件调试中的应用
Windbg在软件调试中的应用 Windbg是微软提供的一款免费的,专门针对Windows应用程序的调试工具.借助于Windbg, 我们常见的软件问题:软件异常,死锁,内存泄漏等,就可以进行高效的排查 ...