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

这时需要我们修改list中objA中的name属性和objD的属性,遇到这样的情况我们一般会使用什么办法解决呢?其实有三种解决方案:
方案一(作用于对象中的深层级和第一层级)

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

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

总结:
| 方案 | 适用范围 | 缺点
| :-: | :-: | :-: |
| 方案一 |多层级和单一层级都存在 | 写法麻烦,单次对象赋值,对象层级多的时候,容易遗漏
| 方案二 |只适用与第一层级 | 只适用第一层级
| 方案三 |多层级和单一层级都存在 | 若存在深层及和单一层级的,需要多次赋值
这三种写法都可以,使用哪一种方案,还需要根据业务来定。
React中setState如何修改深层对象?的更多相关文章
- React中setState学习总结
react中setState方法到底是异步还是同步,其实这个是分在什么条件下是异步或者同步. 1.先来回顾一下react组件中改变state的几种方式: import React, { Compone ...
- React中setState同步更新策略
setState 同步更新 我们在上文中提及,为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于this.state来计算 ...
- React中setState的怪异行为 ——setState没有即时生效
setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方 ...
- React中setState 什么时候是同步的,什么时候是异步的?
class Example extends React.Component { constructor() { super(); this.state = { val: 0 }; } componen ...
- react中setState用法
setState()更新状态的2种写法 setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => ...
- React中setState方法说明
setState跟新数据是同步还是异步? setState跟新数据是异步的. 如何用代码表现出来是异步的. 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Fa ...
- React中setState注意事项
setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正 ...
- 「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)
运用在React 中 setState的对象.数组的操作时是不能用类似array.push()等方法,因为push没有返回值,setState后会出现state变成Number,为了方便他人和自己查看 ...
- React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
随机推荐
- Java体系
Java之父:詹姆斯·高斯林 java之前叫做“Oak”,后改名为Java.//Oak来源于橡树,java 来源爪哇岛的一种咖啡 Java语言平台 J2SE(Java 2 Platform Stand ...
- 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_15-网关-路由配置
4.4 路由配置 4.4.1需求分析 Zuul网关具有代理的功能,根据请求的url转发到微服务,如下图: 客户端请求网关/api/learning,通过路由转发到/learning 客户端请求网关/a ...
- java如何获取项目的工作目录
package maptoxml; public class Tfff { public static void main(String[] args) { System.out.println(&q ...
- 丢失libiconv-2.dll解决办法以及无法定位输入点libiconv-2.dll到动态链接库
摘自https://blog.csdn.net/mengxiangjia_linxi/article/details/78147348 丢失libiconv-2.dll解决办法以及无法定位输入点lib ...
- 【c# 学习笔记】阻止派生类重写虚成员
使用sealed 关键字可以防止一个类被其他类继承.同样,也可以使用sealed关键字来阻止派生类重写虚成员.如,我们希望Horse的继承类不再具有扩展Voice方法的行为.(上一章链接:https: ...
- 【c# 学习笔记】封装
封装 指的是把类内部的数据隐藏起来,不让对象实例直接对其操作.c#中提供了属性机制来对类内部的状态进行操作. 在c#中,封装可以通过Public.Private.Protected和Internal等 ...
- 共享文件word / excel /ppt 被用戶自己锁定无法编辑-解決方法
共享文件word / excel /ppt 被用戶自己鎖定無法編輯,但用戶嘗試過關閉所有文件和重啓過系統,依然無法編輯. 搜到解決方法: Just in case someone looking fo ...
- SQL 语句是如何执行的
SQL 语句是如何执行的,虽然SQL是声明式语言,我们可以像使用英语一样使用它,不过在RDBMS(关系型数据库管理系统)中,SQL的实现方式还是有差别的.极客教程从数据库的角度来思考一下SQL是如何被 ...
- es6 装饰器decorator的使用 +webpack4.0配置
decorator 装饰器 许多面向对象都有decorator(装饰器)函数,比如python中也可以用decorator函数来强化代码,decorator相当于一个高阶函数,接收一个函数,返回一个被 ...
- css中盒子模型与box-sizing属性
盒子模型 w3c标准:定义的width为 内容,有padding,border 都会使得 最终呈现的宽度为 定义的width+padding+border的总和,有margin另加 ie标准:定义的w ...