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)中的某一个对象中的单个参数的更多相关文章

  1. mutation中修改state中的状态值,却报[vuex] do not mutate vuex store state outside mutation handlers.

    网上百度说是在mutation外修改state中的状态值,会报下列错误,可我明明在mutations中修改的状态值,还是报错 接着百度,看到和我类似的问题,说mutations中只能用同步代码,异步用 ...

  2. node.js+react全栈实践-Form中按照指定路径上传文件并

    书接上回,讲到“使用同一个新增弹框”中有未解决的问题,比如复杂的字段,文件,图片上传,这一篇就解决文件上传的问题.这里的场景是在新增弹出框中要上传一个图片,并且这个上传组件放在一个Form中,和其他文 ...

  3. Vuex入门实践(中)-多module中的state、mutations、actions和getters

    一.前言 上一篇文章<Vuex入门实践(上)>,我们一共实践了vuex的这些内容: 1.在state中定义共享属性,在组件中可使用[$store.state.属性名]访问共享属性 2.在m ...

  4. Electron结合React,在渲染进程中使用 node 模块

    Electron结合React,在渲染进程中使用 node 模块 问题 将create-react-app与electron集成在了一个项目中.但是在React中无法使用electron.当在Reac ...

  5. [置顶] js中如何复制一个对象,如何获取所有属性和属性对应的值

    在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...

  6. 简单聊聊java中如何判定一个对象可回收

    背景 说到java的特性,其中一个最重要的特性便是java通过new在堆中分配给对象的内存,不需要程序员主动去释放,而是由java虚拟机自动的回收.这也是java和C++的主要区别之一:那么虚拟机是如 ...

  7. spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中(合并对象)

    spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中(合并对象) 它的出现原因: BeanUtils提供对Java反射和自省API的包装.其主要目的是利用 ...

  8. vuex this.$store.state.属性和mapState的属性中的一点点区别

    做泰康公众号的项目时候有一个需求创建公众号的时候后台有一个社区id提供给后台展现人员和部门,在群发消息时候也要给后台一个社区id只不过获取社区的id接口和上一个不是一样的,本来在页面中写了两个sele ...

  9. windows环境vagrant修改静态资源文件,centos虚拟机中nginx的web环境下不生效

    最近上手krpano,本地修改了krpano.html文件或者xml文件,在虚拟机环境打开文件是修改过来了,在nginx中就是不生效. 修改nginx.conf中http{}中的 sendfile  ...

随机推荐

  1. vue、Element 点击按钮以弹窗形式预览pdf文件

    直接上代码吧 <div > <el-button type="success" size="small" @click="isVie ...

  2. [Centos7]Centos7安装

    Centos7安装 安装wget yum -y install wget 更换镜像源 # 备份本地yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum. ...

  3. luogu 1593 因子和 约数+线性筛

    等比数列那里忘判项数等于 $1$ 的情况了. Code: #include <cstdio> #include <vector> #include <algorithm& ...

  4. 交换机配置——单交换机划分VLAN配置

    一.实验目的:实现单交换机划分VLAN,使PC1主机和PC2主机不能通讯 二.拓扑图 三.实验步骤 最开始两台主机都输入的端口f0/1和f0/2都属于vlan 1 可以相互通讯(如下图) 现在需要让P ...

  5. Hibernate 5 Maven 仓库的 Artifacts

    Hibernate artifacts 官方发布的仓库在 JBoss Maven repository 中.Hibernate 发布的 artifacts 也会同时同步到 Maven Central ...

  6. flask框架(六): 实现支持正则的路由

    一:默认路由 @app.route('/user/<username>') @app.route('/post/<int:post_id>') @app.route('/pos ...

  7. js中的事件委托技术

    1.什么是事件委托:通俗的讲,时间就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个时间本来是加在某些元素上的,然而你却加到别人身上来做,完成这 ...

  8. How to intercept any postback in a page? - ASP.NET

    How to intercept any postback in a page? - ASP.NET There's a couple of things you can do to intercep ...

  9. HearthBuddy的狂野和休闲模式来回切换

    表现1 配置是标准,休闲模式 然后一直重复提示 select desire deck select causal mode 表现2 配置是狂野,休闲模式 然后一直提示 切换到狂野 切换到标准 把模式切 ...

  10. koa 基础(十七)原生 JS 中的类、静态方法、继承

    1.app.js /** * 原生 JS 中的类.静态方法.继承 * es5中的类和静态方法 */ function Person(name, age) { // 构造函数里面的方法和属性 this. ...