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. 基于locust的性能测试平台搭建

    前段时间加入性能测试组,并参与搭建基于locust的性能测试平台,我分到的任务相对独立,开发locust的启动接口和停止运行接口,现开发的差不多了,做一个总结 一.locust运行的相关内容 二.lo ...

  2. .NET面试题系列(22)字符串暂存池(缓冲池)

    序言 字符串不可变性,字符串的‘暂存池’两个特性 字符串是引用类型,程序中会存在大量的字符串对象,如果每次都创建一个字符串对象,会比较浪费内存.性能低,因此CLR做了“暂存池”(拘留池,缓冲池,暂存池 ...

  3. ThinkPHP系统常量

    _ROOT__ : 网站根目录地址 __APP__ : 当前项目(入口文件)地址 __URL__ : 当前模块地址 __ACTION__ : 当前操作地址 __SELF__ : 当前 URL 地址 _ ...

  4. Spring Batch 4.2 新特性

    Spring Batch 4.2 的发行版主要增强了下面的改进: 使用 Micrometer 来支持批量指标(batch metrics) 支持从 Apache Kafka topics 读取/写入( ...

  5. (Java多线程系列二)线程间同步

    Java多线程间同步 1.什么是线程安全 通过一个案例了解线程安全 案例:需求现在有100张火车票,有两个窗口同时抢火车票,请使用多线程模拟抢票效果. 先来看一个线程不安全的例子 class Sell ...

  6. FRP

    使用 FRP 反向代理实现 Windows 远程连接 互联网普及率的日渐攀升与 IPv4 资源的持续减少,现在大部分家庭宽带都不会分配公网 IP ,这使一些网络应用的实现多了些困难,像个人的 NAS ...

  7. 线程系列2--Java线程的互斥技术

    java的多线程互斥主要通过synchronized关键字实现.一个线程就是一个执行线索,多个线程可理解为多个执行线索.进程有独立的内存空间,而进程中的线程则是共享数据对象资源.这样当多个执行线索在C ...

  8. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

  9. websphere启动报:Could not resolve placeholder 'hibernate.hbm2ddl.auto' in string value "${hibernate.hbm2ddl.auto}"

    websphere启动报/WEB-INF/applicationContext-orm- hibernate.xml]: Could not resolve placeholder 'hibernat ...

  10. Mac os文件名大小写不敏感

    Mac os文件名大小写不敏感,但是linux是大小写敏感的. 让我们代入一个场景, 创建一个新文件,你习惯以小写字母开头,接着在其他module中import,看起来一切都正常,emmm,确实没有任 ...