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 ...
随机推荐
- 【边缘计算】 Edge Computing: Vision and Challenges
原文地址: http://www.cs.wayne.edu/~weisong/papers/shi16-edge-computing.pdf ----------------------------- ...
- Mysql备份工具mysqldump和mysqlhotcopy
(1).Mysql备份类型 1)按照备份时对数据库的影响分为 Hot backup(热备):也叫在线备份.指在数据库运行中直接备份,对正在运行的数据库没有任何影响. Cold backup(冷备):也 ...
- 常规函数模块CALL in new task 报错
使用START NEW TASK, 函数需要是远程调用模块. 错误:FUNCTION module ' ZMMFM0021' cannot be used for 'remote' CALLS. ...
- IntelliJ-svn配置与使用
目录 IntelliJ-svn配置与使用 SVN的配置 版本控制主要操作按钮 版本控制相关的常用设置 Version Control窗口 @(目录) IntelliJ-svn配置与使用 SVN的配置 ...
- git 关于Git每次进入都需要输入用户名和密码的问题解决
解决办法: git bash进入你的项目目录,输入: git config --global credential.helper store 然后你会在你本地生成一个文本,上边记录你的账号和密码.当然 ...
- C# winform中使用Panel调节窗口变化是各控件的位置(转)
我的目的是在窗口上有些控件,在窗口大小变化时,上面的控件位置不动,大小也不动.下面的控件随着窗口的大小变化而变大. 做法是用两个panel,panelTop和panelFill.上面的控件都放到pan ...
- Paper Mark2
论文:CBAM: Convolutional Block Attention Module 论文链接 pytorch代码 论文:Approach for Fashion Style Recogniti ...
- ELK之elasticsearch删除索引
参考文档:https://www.cnblogs.com/Dev0ps/p/9493576.html elasticsearch使用时间久了会产生大量索引占用磁盘空间,可以删除索引来释放 查看当前所有 ...
- 【VS2015软件报错】命名空间 system.windows 中不存在类型或命名空间名称 forms (是否缺少程序集引用 )错误
C#项目: 添加“using System.Windows.Forms;”之后提示“命名空间 system.windows 中不存在类型或命名空间名称 forms (是否缺少程序集引用 )”错误 详细 ...
- [转帖]YES!AMD千元无敌U闪亮登场、16核至尊为用户着想
YES!AMD千元无敌U闪亮登场.16核至尊为用户着想 投递人 itwriter 发布于 2019-09-30 09:34 评论(0) 有567人阅读 原文链接 [收藏] « » https://ne ...