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

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

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. 【Centos】【Python】【Flask】阿里云上部署一个 flask 项目

    1. 安装 python3 和 pip3 参考:http://www.cnblogs.com/mqxs/p/8692870.html 2.安装 lnmpa 集成开发环境 参考:http://www.c ...

  2. SpringMVC系列(一)SpringMVC概述和搭建SpringMVC的第一个helloWord入门程序

    一.SpringMVC 概述 • Spring为展现层提供的基于MVC设计理念的优秀的Web框架,是目前最主流的MVC框架之一 • Spring3.0 后全面超越 Struts2,成为最优秀的 MVC ...

  3. e791. 为JSpinner定制编辑器

    This example replaces the default editor (a JFormattedTextField) in a spinner component with a custo ...

  4. e867. 获取和设置外观

    To change the look and feel, you need to know the class name of the new look and feel. This example ...

  5. Blog

    http://www.cnblogs.com/digdeep/archive/2015/11/16/4968453.htmlhttp://it.dataguru.cn/article-8406-1.h ...

  6. 某软件大赛C#版考题整理——【多选题】

    二.多选题(20小题共40.0分) 1. 下列选项中,属于HTML按钮元素的是:(). A. <input name="btn" type="button" ...

  7. MySql:charset和collation的设置

    From: http://www.2cto.com/database/201302/189920.html MySql:charset和collation的设置   charset 和 collati ...

  8. JavaScript 编码小技巧

    三元操作符 如果使用if...else语句,那么这是一个很好节省代码的方式. Longhand: const x = 20; let answer; if (x > 10) { answer = ...

  9. 在Android中,px,dp,dip,sp的不同之处

           最近在学习Android开发,一直没有弄清楚px,dp,dip,sp的区别.今天正好有时间,就花时间研究了一下.     众所周知,Android厂商非常多,各种尺寸的Android手机 ...

  10. javascript报错集锦

    1.JS 异常之 missing ) after argument list 错误释疑报错原因:不是字符串就输出啦