在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的:

这时需要我们修改listobjA中的name属性和objD的属性,遇到这样的情况我们一般会使用什么办法解决呢?其实有三种解决方案:

方案一(作用于对象中的深层级和第一层级)

方案二(作用对象中的第一层级):

方案三(作用于对象中的深层级和第一层级):

总结:

| 方案 | 适用范围 | 缺点
| :-: | :-: | :-: |
| 方案一 |多层级和单一层级都存在 | 写法麻烦,单次对象赋值,对象层级多的时候,容易遗漏
| 方案二 |只适用与第一层级 | 只适用第一层级
| 方案三 |多层级和单一层级都存在 | 若存在深层及和单一层级的,需要多次赋值

这三种写法都可以,使用哪一种方案,还需要根据业务来定。

React中setState如何修改深层对象?的更多相关文章

  1. React中setState学习总结

    react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...

  2. React中setState同步更新策略

    setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...

  3. React中setState的怪异行为 ——setState没有即时生效

    setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...

  4. React中setState 什么时候是同步的,什么时候是异步的?

    class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...

  5. react中setState用法

    setState()更新状态的2种写法 setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => ...

  6. React中setState方法说明

    setState跟新数据是同步还是异步? setState跟新数据是异步的. 如何用代码表现出来是异步的. 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Fa ...

  7. React中setState注意事项

    setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正 ...

  8. 「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)

    运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...

  9. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

随机推荐

  1. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_04-新增课程-数据字典

    课程的等级是个单选按钮 2.3 数据字典 2.3.1介绍 在新增课程界面需要选择课程等级.课程状态等,这些信息统一采用数据字典管理的方式. 本项目对一些业务的分类配置信息,比如:课程等级.课程状态.用 ...

  2. HttpClient结合PostMethod调用接口

    HttpClient结合PostMethod调用接口   解决方法: HttpClient client = new HttpClient(); PostMethod post = new PostM ...

  3. Qt学习过程

    1.常用控件的使用[除了常见的还有QTableWidget.QTreeWidget...]2.信号与槽[需要知道connect函数的最后一个参数Qt::ConnectionType取不同枚举时的含义] ...

  4. Spring事务的隔离级别和传播机制

    七个传播机制:(红色字体的代表如果不设置传播机制时候默认的)PROPAGATION_REQUIRED-支持当前事务;如果不存在,创建一个新的. PROPAGATION_SUPPORTS-支持当前事务; ...

  5. 根据DELTA自动生成SQL语句

    上传客户端的CLIENTDATASET.delta到服务器的clientdataset.data,服务端解析clientdataset的数据生成相应的SQL语句. 相对于直接调用datasetprov ...

  6. WordPress主题制作:基础样式文件

    1.style.css文件,其中必须包含 /* Theme Name:主题名称 Theme URI: 主题链接 Version: 版本 Description: 主题简介 Author: 主题作者 A ...

  7. python 创建虚拟环境(virtualenv)

    原文地址:https://www.jianshu.com/p/2645d8f2e690 另附连接:Linux环境下虚拟环境virtualenv安装和使用 virtualenv 安装 1.Install ...

  8. laydate时间控件:开始时间,结束时间最大最小值

    时间控件地址及插件下载链接:https://www.layui.com/doc/modules/laydate.html 填充时间已两个功能为例: 1.添加功能 :时间 规则:选择开始时间后,点击结束 ...

  9. jira使用一:如何给项目分组、sprint并行、禁止发送消息给atlassian

    问题一:如何设置多个sprint并行? 问题二: 如何分组显示 设置泳道,并快速过滤 问题3:添加所属产品? 管理员登录Jira后台设置-问题-自定义字段找到:所属产品,进入 配置 界面在配置界面中, ...

  10. eclipse3.62开发第一个java程序HelloWorld

    [学习笔记] 用eclipse3.62开发第一个java程序: 使用eclipse之前们需要先配置一下jdk.window/preference/java/installed JREs,详细请见视频. ...