在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. Linux下开发常用配置

    JDK /etc/profile export JAVA_HOME=/usr/local/jdk1.8.0_181export CLASSPATH=.:$JAVA_HOME/jre/lib/rt.ja ...

  2. 异步回收fork出的子进程(僵尸进程)

    #include <stdio.h> #include <stdlib.h> #include <signal.h> #include <unistd.h&g ...

  3. celery的log如何传递给django,由django管理

    celery自己管理log目录 celery worker --autoscale=4,1 --app=erebus.celeryapp:app -l info -f /home/admin/outp ...

  4. 静态路由协议和动态路由协议(rip协议和ospf协议)

    一.静态路由协议 1.拓扑图 2.分别是设置各个路由器的ip地址 以R1为例 R1> R1>en //进入全局配置模式 R1#conf t //进入端口 int g0/0 //配置ip地址 ...

  5. vscode常用插件小结

    工欲善其事,必先利其器. 个人用过的代码编辑器有sublime,webstrom,vscode,H5builder.综合比较下来还是更倾向于vscode. sublime是一款轻量级的编辑器,优点是启 ...

  6. 高级UI-RecyclerView简单使用

    RecyclerView从Android 5.0开始引入,用以替代ListView.GridView控件,RecyclerView的存在,使得控件的耦合度更低,在ListView中需要使用ViewHo ...

  7. eNSP——配置NAT

    原理: 实验案例: 拓扑图: 实验编址: 1.基本配置 根据实验编址进行基本配置,并测试连通性. 2.配置静态NAT 公司在网关路由器R1上配置访问外网的默认路由. 需要在网关路由器R1上配置NAT地 ...

  8. ansible介绍、安装与配置

    一.ansible简介 (1)简介: Ansible是近年越来越火的一款自动化运维工具,其主要的功能是帮助运维实现IT工作的自动化,降低人为操作失误.提高业务自动化率,常用于软件部署.配置自动化.管理 ...

  9. Python 用hashlib求中文字符串的MD5值 (转自 haungrui的专栏)

    使用过hashlib库的朋友想必都遇到过以下的错误吧:“Unicode-objects must be encoded before hashing”,意思是在进行md5哈希运算前,需要对数据进行编码 ...

  10. PHP基础之函数

    函数概念: 函数是用来完成某种特定任务的可重用代码块; 函数可以使程序更具模块化,拥有良好的结构; 函数定义后在程序中可以重复调用; 函数分为内置函数和自定义函数 考点: 变量的作用域和静态变量 延伸 ...