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

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

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(十一)——删除事件以及刷新列表的更多相关文章

  1. React Native(十一)——按钮重复点击事件的处理

    最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题 ...

  2. React Native 之FlatList 下拉刷新和上拉加载更多

    接上一篇代码: 只修改了FlatListDemo.js里面的代码 import React, {Fragment,Component} from 'react'; import { SafeAreaV ...

  3. React Native 让组件做到局部刷新

    利用RN的状态机机制,我们可以通过this.setState({optional:...})来控制界面的刷新,但是一定会触发render方法,那如何保证不调用render方法从而做到界面的局部刷新呢? ...

  4. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  5. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  6. React Native 列表的总结

    React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件.这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有 ...

  7. react native 刷新机制----通知

    在项目中,不知道大家有没有遇到这样的一个问题,比如说有两个页面A,B.A页面中有某个按钮点击后可以跳转到B页面,现在有一个需求就是,我在B页面中做了某些操作,然后点击回退按钮,回到A页面,A页面中的数 ...

  8. React Native学习(七)—— FlatList实现横向滑动列表效果

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  9. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. 五、excel末尾补0和开头补0

    1.末尾补0 假设数据在A列,则在B1输入以下公式 如果长度不足10,在后面加0,否则等于A1 (1)=IF(LEN(A1<17),LEFT(A1&"0000000000&qu ...

  2. (笔记)Mysql命令create:创建数据库

    create命令用于创建数据库. create命令格式:create database <数据库名>; 注意:创建数据库之前要先连接Mysql服务器. 1) 建立一个名为xhkdb的数据库 ...

  3. 【吉比特】G-bits2017技术类岗位编程题

    求素数 输入M.N,1 < M < N < 1000000,求区间[M,N]内的所有素数的个数.素数定义:除了1以外,只能被1和自己整除的自然数称为素数 输入描述: 两个整数M,N ...

  4. Java如何检查一个线程停止或没有?

    Java如何检查一个线程停止或没有? 解决方法 下面的示例演示如何使用 isAlive()方法检查一个线程是否停止. public class Main { public static void ma ...

  5. PyQt的signal 和 solit的补充

    from PyQt5.QtWidgets import (QWidget , QVBoxLayout , QHBoxLayout, QLineEdit, QPushButton) from PyQt5 ...

  6. 每天一个linux命令:ifconfig命令 临时修改重启后恢复原样

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...

  7. Linux系统设置及基本操作

    下面是Linux系统的基本的使用以及系统操作命令,目录结构等等! linux系统的操作方式 图形界面:RHEL6默认使用GNOME桌面环境 伪字符终端:  图形桌面环境中的伪字符终端 对应程序: gn ...

  8. Redis面试题及答案整理

    1.什么是Redis?简述它的优缺点? Redis的全称是:Remote Dictionary.Server,本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载 ...

  9. Ckeditor的JS的加载和取值和赋值方法

    Ckeditor 就是原来的Fckeditor. JS加载: $(function() { CKEDITOR.replace('FContent'); //FContent:这个对应文本域 }); J ...

  10. phpcms v9模板制作教程(转载)

    第一节 1.首先下载phpcms v9的集成安装包并安装,这里就不详细说明了. 2.本地调试建议大家使用APMserver,或者wampserver等,可以到PHPCMS吧官方网站首页链接下载.安装好 ...