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方法,并把赋值一句放在整个循环的外层

纵览:经过一番波折最终实现了需求,虽然没能一次到位,但依旧从中学到了点。

继续加油~

时间: 2024-10-05 16:18:33

React Native(十一)——删除事件以及刷新列表的相关文章

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

最初开始做后台管理系统的时候,就曾遇到过这样一种场景:"快速点击确认按钮,就会对此触发确认事件,导致多次请求数据库":于是最终我们得当的通过处理那个确认button,解决了上述问题.而当自己开始使用RN做APP的时候,同样的问题居然也出现了,于是在处理完其他问题后,专门上网搜了一下此类问题的解决办法(不过好像都挺"高深一点",而自己却总认为越简单越好,那就摒弃了网上搜到的办法,另辟蹊径咯).突然意识到或许应该从源头解决,于是在官网中看到了这个: 原来在手机开发中也可

【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2242.html 开发过游戏的都应该很清楚,"刷屏"是多么的重要.其实开发应用也如此,当组件的数据被修改后,如何及时更新组件呈现出最新的数据与效果一样至关重要. 那么这里Himi大概讲三种常用的方式: this.setState()  [最为常用] 这是在事件处理函数中和请求回调函数中触发 UI 更新的主要

react native点击事件传递参数

比如我们定义一个TouchableOpacity点击事件,该方法需要接收一个参数值,如下 _gotoSubClass(sectionID, rowID) { console.log("sectionID="+sectionID + "rowID=" + rowID); } 那么在TouchableOption组件的onPress属性中应该这样写: <TouchableOpacity onPress={() => this._gotoSubClass(se

React Native 调研报告

Facebook三月份开源了React Native iOS平台的框架,让移动开发人员和web开发者都各自兴奋了一把:native的移动开发者想的比较多的估计是Facebook的那句:"learn once, write everywhere",而web开发者兴奋的估计是,不需要学习iOS那陌生的OC或者swift语言,用自己熟悉的javascript语言就可以开发原生的移动APP了.那么新推出的react native 能否承载的了两大阵营的开发者的期待了.本人及同事对react n

React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50664323 本文出自:[江清清的博客] (一)前言 今天我们一起来看一下PullToRefreshViewAndroid下拉刷新组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该PullToRefr

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

在项目中,不知道大家有没有遇到这样的一个问题,比如说有两个页面A,B.A页面中有某个按钮点击后可以跳转到B页面,现在有一个需求就是,我在B页面中做了某些操作,然后点击回退按钮,回到A页面,A页面中的数据也需要刷新过来.嗯,如果是做过android开发的朋友一定会知道,解决这样的需求的方法有很多,比如可以使用activity的生命周期,也可以使用广播等等,但是如果在react native中呢?? 我们看一下官网可以知道,react native的生命周期不是针对于页面的,而是组件,什么意思呢?也

React Native之获取通讯录信息并实现类通讯录列表(ios android)

React Native之获取通讯录信息并实现类通讯录列表(ios android) 一,需求分析 1,获取通讯录信息,筛选出通讯录里有多少好友在使用某个应用. 2,获取通讯录信息,实现类通讯录,可拨打电话 发短信等. 二,技术介绍与配置 2.1 技术介绍 1,react-native-contacts地址:https://www.npmjs.com/package/react-native-contacts 2,下载安装:npm install react-native-contacts --

[技术博客]react native事件监听、与原生通信——实现对通知消息的响应

在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数,此时可能会用到react-navigation来传递:此外,若要将异步函数.不可预料的事件执行等得到的参数用于页面刷新时,前述的方法都不太奏效. DeviceEventEmitter react-native中采用了DeviceEventEmitter来实现对事件的监听,实现非父子关系的页面之间的

React Native ——实现一个简单的抓取github上的项目数据列表

/** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, TextInput, ListView, } = React; var GIT_URL = 'https://api.github.com/sea