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

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

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. Axiom3D:资源引用与加载基本流程.

    Archive:对应文件夹位置,包含文件夹,压缩文件,网络位置,包含Load,Unload,Open,Create,Remove,FineFile等主要虚方法,用于对应各具体Archive来实现. R ...

  2. SAP ERP 与SAP CRM有什么不同?

    SAP ERP 与SAP CRM有什么不同? 从管理理念上来说,ERP是提高企业内部资源的计划和控制能力,讲究的是在满足客户.及时交货的同时最大限度地降低各种成本,通过提高内部运转效率来提高对客户的服 ...

  3. SpringMVC系列(十四)Spring MVC的运行流程

    Spring MVC的运行流程图: 1.首先看能不能发送请求到Spring MVC的DispatcherServlet的url-pattern2.如果能发送请求,就看在Spring MVC中是否存在对 ...

  4. 使用OpenSSL创建自己的CA root certificate

    在密码学中,CA(Certificate Authority,认证机构)是指一个被多个用户信任的机构,该机构能够创建和指派公钥证书. 为规范起见,我们先介绍本文可能涉及的术语, asymmetric ...

  5. Ubuntu 14.04 LTS 安装 Juno 版 OpenStack Keystone

    本文介绍如何在Ubuntu 14.04 LTS 上安装Juno版的Keystone, 我们采用的是手动安装的方式, 同时仅针对OpenStack的身份与访问管理系统Keystone. 事实上OpenS ...

  6. js 操作json对象增删改

    //将表单序列化成字符串 $.fn.serializeObject = function () { var obj = {}; var count = 0; $.each(this.serialize ...

  7. miRbase 数据库简介

    miRbase 是miRNA 的数据库,目前最新版本为 release 21, 共有28645 条 miRNA,  第22 版已经完成,即将发布,22版新增了10000 个miRNA, 大多来源于新的 ...

  8. Java开发者必备的六款工具

    每一位Java程序员都会有套工具来应对工作上的挑战.多年来,Java程序员使用软件来完成他们的工作.有很多工具对他们是有用的,不过对于初入行的人员来说,寻找合适的工具是困难的,并且是浪费时间的.而今天 ...

  9. 使用 mysql_use_result 还是使用 mysql_store_result?

    From: http://my.oschina.net/moooofly/blog/186456 本文整理了关于“使用 mysql_use_result 还是 mysql_store_result”的 ...

  10. git解决冲突(rebase版)

    当使用git rebase碰到冲突时, git rebase <Remote Branch>/<Your Branch> 信息如下: error: Failed to merg ...