修改state(react)中的某一个对象中的单个参数
react项目中我们经常会涉及到修改state中参数的问题,如果参数为常用的基本类型变量,我们可以直接通过this.setState({...})方法来进行修改,但是如果变量为一个对象我们要如何修改呢?
我们要修改对象中的一个值或几个值而保证其它参数不会受到影响,如state中含有pagintion对象,就是我们常用的分页对象。对于这种情况我们首先想到的就是先将对象整体保存下来,然后将对象中的值修改为我们想要的值,然后再使用this.setState方法来整体赋值。于是我们就有了下面两种方法:
1、使用es6的解构赋值方法const pagination = {...this.state.pagination }获取到对象中的所有值,然后再pagination.page = 10(如修改page的值为10)来修改为成我们想要的值,最后再使用this.setState({pagination:pagination})来进行整体赋值就好了。
2、还有一种更为简洁的赋值方式就是使用Object.assign方法,直接使用 const pagination = Object.assign({}, this.state.pagination, { page: 10 })一步到位,然后再调用this.setState({pagination:pagination}),就ok了。
修改state(react)中的某一个对象中的单个参数的更多相关文章
- mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.
网上百度说是在mutation外修改state中的状态值,会报下列错误,可我明明在mutations中修改的状态值,还是报错 接着百度,看到和我类似的问题,说mutations中只能用同步代码,异步用 ...
- node.js+react全栈实践-Form中按照指定路径上传文件并
书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文 ...
- Vuex入门实践(中)-多module中的state、mutations、actions和getters
一.前言 上一篇文章<Vuex入门实践(上)>,我们一共实践了vuex的这些内容: 1.在state中定义共享属性,在组件中可使用[$store.state.属性名]访问共享属性 2.在m ...
- Electron结合React,在渲染进程中使用 node 模块
Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在Reac ...
- [置顶] js中如何复制一个对象,如何获取所有属性和属性对应的值
在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...
- 简单聊聊java中如何判定一个对象可回收
背景 说到java的特性,其中一个最重要的特性便是java通过new在堆中分配给对象的内存,不需要程序员主动去释放,而是由java虚拟机自动的回收.这也是java和C++的主要区别之一:那么虚拟机是如 ...
- spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中(合并对象)
spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中(合并对象) 它的出现原因: BeanUtils提供对Java反射和自省API的包装.其主要目的是利用 ...
- vuex this.$store.state.属性和mapState的属性中的一点点区别
做泰康公众号的项目时候有一个需求创建公众号的时候后台有一个社区id提供给后台展现人员和部门,在群发消息时候也要给后台一个社区id只不过获取社区的id接口和上一个不是一样的,本来在页面中写了两个sele ...
- windows环境vagrant修改静态资源文件,centos虚拟机中nginx的web环境下不生效
最近上手krpano,本地修改了krpano.html文件或者xml文件,在虚拟机环境打开文件是修改过来了,在nginx中就是不生效. 修改nginx.conf中http{}中的 sendfile ...
随机推荐
- SDOI2015 寻宝游戏 | noi.ac#460 tree
题目链接:戳我 可以知道,我们相当于是把有宝藏在的地方围了一个圈,求这个圈最小是多大. 显然按照dfs序来遍历是最小的. 那么我们就先来一遍dfs序列,并且预处理出来每个点到根的距离(这样我们就可用\ ...
- Liblinear Visual studio 2013 Error C3057
使用LibLinear时编译时出现Error C3057的错误: OpenMP报错,查询MSDN: #pragma omp threadprivate(var)//var在编译之前必须是确定值 所以修 ...
- 如何使用PLX提供的官方驱动和SDK发布自己的产品?
在我的第一篇博文Plx9030通讯卡驱动开发提到,PLX官网提供了丰富的9000系列(9030,9052,9054)芯片的驱动文件(sys)和SDK开发包.我们在发布自己的产品时,简单的话,可以直接用 ...
- Centos 7禁止ftdi_sio模块
$ dmesg[ 3305.097301] usb 1-1: USB disconnect, device number 7[ 3306.883704] usb 1-1: new high-speed ...
- codeforces643D
阿狸的基环内向树森林 Background 当阿狸醒来的时候,发现自己处在基环内向森林的深处,阿狸渴望离开这个乌烟瘴气的地方.“明天还有与桃子的约会呢”,阿狸一边走一边说,“可是,这个森林的出口在哪儿 ...
- Java集合框架之接口Collection源码分析
本文我们主要学习Java集合框架的根接口Collection,通过本文我们可以进一步了解Collection的属性及提供的方法.在介绍Collection接口之前我们不得不先学习一下Iterable, ...
- 0.JQuery学习
jQuery 教程 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 简介 jQuery 库可以通过一行简单的标记被添加到网页中 ...
- linux 下载jdk
1.官方下载jdk的地方 jdk8下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213315 ...
- 【软件工程】Alpha冲刺(2/6)
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 了解了如何根据系统获取的实际情况进行后端任务的调整 网易云音乐推荐算法的分析 ...
- VLC-Qt 入门指南
关于 VLC-Qt VLC-Qt:一个结合了 Qt 应用程序和 libVLC 的免费开源库.它包含了用于媒体播放的核心类,以及用于更快速地进行媒体播放器开发的一些 GUI 类. 官网地址:http ...