修改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 ...
随机推荐
- Unicode规范中的BOM 和 ISO8891-1编码
Unicode规范中的BOM Unicode规范中有一个BOM的概念.BOM——Byte Order Mark,就是字节序标记.在这里找到一段关于BOM的说明: 在UCS 编码中有一个叫做" ...
- luogu 1414 又是毕业季II 约数相关
感觉好水呀~ Code: #include <cstdio> #include <algorithm> #define N 1000005 #define setIO(s) f ...
- CSS3选择器:nth-child和:nth-of-type的差异
p:nth-child(2)表示这个元素要是p标签,且是第二个子元素,是两个必须满足的条件. <section> <div>我是一个普通的div标签</div> & ...
- noi.ac #531 神树和物品
题目链接:戳我 决策单调性 (蒟蒻终于会写决策单调性啦!考试全场切这题就我不会啊嘤) (证明?不会啊,自己打表看QAQ) 44pts \(O(n^2)\)代码: #include<iostrea ...
- [洛谷P3941]:入阵曲(前缀和+桶)
题目传送门 题目背景 丹青千秋酿,一醉解愁肠.无悔少年枉,只愿壮志狂. 题目描述 小$F$很喜欢数学,但是到了高中以后数学总是考不好.有一天,他在数学课上发起了呆:他想起了过去的一年.一年前,当他初识 ...
- Android学习_7/25
常用控件 Android控件使用规律:先定义id,再指定宽度和高度,然后适当加入一些控件特有的属性 1. TextView 在界面上显示一段文本 2. Button ...
- [题解] [SCOI2010] 生成字符串
题面 题解 考虑到直接求合法方案不好求, 我们转化为用总方案减去不合法方案 总方案就是\(\binom{n+m}{m}\), 即在\(n+m\)个位置中放\(n\)个数 我们将初始的空序列看做\((0 ...
- MySQL:如何选取Table中的50到100行
MySQL:如何选取Table中的50到100行 使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢?不用担心,MySql已 经为我们提供了这样一个功能. ? 1 2 [sql] ...
- [心得]暑假Day 8
em. 一波爆炸后回到了一个原始位置rank33 最近两场考试没啥状态 总感觉都读不懂题目了 T1 因为有的边要经过两次,不妨把边复制成双倍,那么再去掉2条,如果能一遍把剩下的边过完,也就是成为一笔画 ...
- C++入门经典-例8.10-实现抽象类中的成员函数
1:抽象类通常作为其他类的父类,如果从抽象类派生的子类是抽象类,则子类必须实现父类中的所有纯虚函数.代码如下: // 8.10.cpp : 定义控制台应用程序的入口点. // #include &qu ...