运用在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 中操作数组和对象的多种方法(合集)的更多相关文章

  1. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

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

  2. Learning React Native笔记

    React Native作为一个新事物,相关的资料还不多 官方的文档比较简单,缺少一些系统的例子 在对React Native的应用中,迫切的想学习一些别人的最佳实践.所以想通过看书系统的学习下 之前 ...

  3. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  4. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

  5. ☕【JVM技术指南】「JVM总结笔记」Java虚拟机垃圾回收认知和调优的"思南(司南)"【下部】

    承接上文 (完结撒花1-52系列)[JVM技术指南]「JVM总结笔记」Java虚拟机垃圾回收认知和调优的"思南(司南)"[上部] 并行收集器 并行收集器(也称为吞吐量收集器)是类似 ...

  6. React Native笔记整理

    判断一个APP页面时原生还是H5:http://www.cnblogs.com/sonice-cinsy/p/5671324.html 写给移动开发者的React Native指南:http://bl ...

  7. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  8. 2、手把手教React Native实战之从React到RN

    ###React简介 RN是基于React设计,了解React有助于我们开发RN应用: React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护 React主要有如下3个特点: *作为UI( ...

  9. React Native笔记

    ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑

随机推荐

  1. string和stringBuffer,stringBuilder的区别

    1,String类的内容一旦声明后是不可改变的,改变的只是其内存的指向,而StringBuffer类的对象内容是可以改变的. 2,对于StringBuffer,不能像String那样直接通过赋值的方式 ...

  2. 加密设备NAT对IPSec的影响

    加密设备NAT对IPSec VPN的影响:我们先配置好经典的IPSec VPN,然后在R3上做PAT看会对IPSec VPN产生什么影响(不会对有隧道的IPSec VPN技术产生影响). 现在默认配置 ...

  3. 2019年4月22日A股暴跌行情思考

    2019年4月22日A股暴跌行情思考 原因:股指期货松绑 盘面:小幅高开,单边下跌 操作: 总结: 股指期货松绑,周末媒体YY大盘暴涨,不排除空头故意借助媒体来诱多,然开盘后暴跌. 预期过于一致时,需 ...

  4. linux可执行程序调试

    gdb调试不用多说 ./testapp  2>%261  适合线上问题排查,可打印程序错误接口代码 ldd testapp  查看代码动态链接程序是否正常

  5. 《程序之美系列(套装共6册)》[美]斯宾耐立思 等 (作者) epub+mobi+azw3

    <架构之美>内容包括:facebook的架构如何建立在以数据为中心的应用生态系统之上.xen的创新架构对操作系统未来的影响.kde项目的社群过程如何让软件的架构从粗略的草图成为漂亮的系统. ...

  6. 在一个不稳定的无效的ViewState净的应用问题。 Erratic Invalid Viewstate issue in a .NET application

    这似乎是很多人都经历了同样的IE8的问题.似乎发生的是,不知何故,IE8(在IE8的渲染模式和IE7兼容模式)将失去4096个字节的HTML文档中该数据缺失导致此异常(通常你看到这一scriptres ...

  7. springboot集成过滤器

    封装自定义接口filter 包含两个方法,第一个过滤的路径数组,第二个为过滤器执行的顺序.spring boot 会按照order值的大小,从小到大的顺序来依次过滤. package com.thee ...

  8. 03.使用私有构造方法或枚类实现 Singleton 属性

    前言 <Effective Java>中文第三版,是一本关于Java基础的书,这本书不止一次有人推荐我看.其中包括我很喜欢的博客园博主五月的仓颉,他曾在自己的博文<给Java程序猿们 ...

  9. Mysql 分组查询出现'this is incompatible with sql_mode=only_full_group_by'的解决办法

    由于Mysql自动开启了 only_full_group_by,所以若查询的字段不在group by里面,则分组报错. 解决办法其一:mysql配置,关闭only_full_group_by,这种办法 ...

  10. 02-08Android学习进度报告八

    今天主要学习了昨天还没有学习完的Date & Time组件的知识. 首先是DatePicker(日期选择器) android:calendarTextColor : 日历列表的文本的颜色 an ...