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 ...
随机推荐
- JavaScript中三个等号和两个等号的区别(“===”与“==”的区别)
1.===:三个等号我们称为等同符,当等号两边的值为相同类型的时候,直接比较等号两边的值,值相同则返回true,若等号两边的值类型不同时直接返回false. 例:100===“100” //返回f ...
- 怎么用群晖webdav实现外网映射网络驱动器
前几天刚作好群晖nas局域网内的磁盘映射功能,今天老板又想实现在家里也能跟在公司一样的方便访问映射功能,因为使用网页操作实在太麻烦了.这可怎么办官方提供的 Assistant工具只能操作局域网的,又没 ...
- osg define shape(create box)
#ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include <osgViewer/Viewer> #include ...
- 简单模拟CO模块
promise方式: // 对co模块的简单模拟 function run(gen){ var g = gen(); function next(data){ var result = g.next( ...
- rabbitMQ tipic 模式
RabbitMQ消息队列(八)-通过Topic主题模式分发消息(.Net Core版) 前两章我们讲了RabbitMQ的direct模式和fanout模式,本章介绍topic主题模式的应用.如果对di ...
- Efcore迁移
Efcore迁移 Add-Migration XX:1.根据模型的实际结构对比当前快照,从而生成新迁移文件的Up和Down方法2.根据模型的实际结构修改快照和新迁移文件---------------- ...
- Zuul1与Spring Cloud Gateway对比
一.API网关 1.1 Zuul1简介 1.2 Spring Cloud Gateway简介 二.对比 2.0 产品对比 2.1 性能对比 2.1.1 低并发场景 2.1.2 高并发场景 2.1.3 ...
- 人工智能_2_特征处理.py
# 特征处理 # 特征预处理:通过统计方法将数据转换为算法需要的数据 # 数值型数据:标准缩放 # 规依法,标准化(常用,适用于当前大数据),缺失值处理(删除,填补中位数平均数,通常按照列填补) # ...
- 【ARM-Linux开发】TI AM437x调试WEB CAM
Rico Board是基于TI AM437x的一款小型学习板,提供的丰富的接口以及资源,能够实现很多有趣的idea,从本周起,开始总共四期的实验教程,帮助玩家们快速上手Rico Board在嵌入式上面 ...
- 最新 东方财富java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东方财富等10家互联网公司的校招Offer,因为某些自身原因最终选择了东方财富.6.7月主要是做系统复习.项目复盘.Leet ...