「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)
运用在React 中 setState
的对象、数组的操作时是不能用类似array.push()
等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看,因此写个数组和对象的操作方法小笔记。
1、修改object中某项
this.setState({
object: {...object, key: value}
});
2、删除数组首位
array.splice(, );
this.setState({
array
});
3、删除数组尾部
array.splice(array.length - );
this.setState({
array
});
4、删除数组任意一项
array.splice(index, );
this.setState({
array
});
5、数组尾部添加一项
this.setState({
array: [...array, item]
});
6、数组头部添加一项
this.setState({
array: [item, ...array]
});
7、数组任意位置添加一项
array.splice(index, , item);
this.setState({
array
});
8、修改数组中任意一项中值
function updateArrayItem(index, key, value) {
this.setState({
array: array.map((item, _index) => _index == index ? {...item, [key]: value} : item)
});
}
9、复杂类型修改
this.setState(prevState => return newState);
「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)的更多相关文章
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- Learning React Native笔记
React Native作为一个新事物,相关的资料还不多 官方的文档比较简单,缺少一些系统的例子 在对React Native的应用中,迫切的想学习一些别人的最佳实践.所以想通过看书系统的学习下 之前 ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- react native 之 在现有的iOS工程中集成react native
在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...
- ☕【JVM技术指南】「JVM总结笔记」Java虚拟机垃圾回收认知和调优的"思南(司南)"【下部】
承接上文 (完结撒花1-52系列)[JVM技术指南]「JVM总结笔记」Java虚拟机垃圾回收认知和调优的"思南(司南)"[上部] 并行收集器 并行收集器(也称为吞吐量收集器)是类似 ...
- React Native笔记整理
判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...
- React 与 React Native 底层共识:React 是什么
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...
- 2、手把手教React Native实战之从React到RN
###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...
- React Native笔记
① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑
随机推荐
- 201771010135杨蓉庆 《面对对象程序设计(java)》第九周学习总结
第7章 异常.日志.断言和调试 1.实验目的与要求 (1) 掌握java异常处理技术: (2) 了解断言的用法: (3) 了解日志的用途: (4) 掌握程序基础调试技巧: 一.理论知识 1.异常:在程 ...
- 影响IPSec的网络问题
影响IPSec VPN的网络问题:①.动态地址问题:两个 站点之间IPSec VPN的条件是站点之间有固定的IP地址,假如说分支站点采用ADSL上网链路,那么其IP地址是动态的,那么就在VPN时出现问 ...
- Educational Codeforces Round 82 B. National Project
Your company was appointed to lay new asphalt on the highway of length nn. You know that every day y ...
- 洛谷P1060开心的金明(滚动数组优化)
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NNN元钱就行”. ...
- 操作系统OS - 常见系统的调度算法
https://en.wikipedia.org/wiki/Scheduling_(computing) 在wiki的下面可以找到
- JDBC 创建连接对象的三种方式 、 properties文件的建立、编辑和信息获取
创建连接对象的三种方式 //第一种方式 Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ ...
- Manacher(马拉车)算法
Manacher算法是一个求字符串的最长回文子串一种非常高效的方法,其时间复杂度为O(n).下面分析以下其实行原理及代码: 1.首先对字符串进行预处理 因为回文分为奇回文和偶回文,分类处理比较麻烦,所 ...
- scala的trait执行报错: 错误: 找不到或无法加载主类 cn.itcast.scala.`trait`
scala的trait执行报错: 错误: 找不到或无法加载主类 cn.itcast.scala.`trait`.Children 原因:包名写成了trait,与trait关键字重名了: package ...
- tcp连接建立和断开
TCP协议作为传输层主要协议之一,具有面向连接,端到端,可靠的全双工通信,面向字节流的数据传输协议. 1.TCP报文段 虽然TCP面试字节流,但TCP传输的数据单元却是报文段.TCP报文段分为TCP首 ...
- R语言 which() 、 which.min() 、 which.max() 函数
函数 which() 可以用来找到满足条件的下标,如 x <- c(3, 4, 3, 5, 7, 5, 9) which(x > 5) 5 7 seq(along=x)[x > 5] ...