在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. 【边缘计算】 Edge Computing: Vision and Challenges

    原文地址: http://www.cs.wayne.edu/~weisong/papers/shi16-edge-computing.pdf ----------------------------- ...

  2. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_08-课程预览技术方案

    3.2.1 技术需求 课程详情页面是向用户展示课程信息的窗口,课程相当于网站的商品,本页面的访问量会非常大.此页面的内容设 计不仅要展示出课程核心重要的内容而且用户访问页面的速度要有保证,有统计显示打 ...

  3. PAT 甲级 1040 Longest Symmetric String (25 分)(字符串最长对称字串,遍历)

    1040 Longest Symmetric String (25 分)   Given a string, you are supposed to output the length of the ...

  4. python迭代器、生成器、装饰器之装饰器

    装饰器...... 定义:本质是函数,为其他函数添加附加功能 原则: 1.不能修改被装饰的函数的源代码 2.不能修改被装饰函数的调用方式 仔细观察下面代码,看看有什么发现. 内嵌函数+高阶函数+闭包= ...

  5. gocheck框架

    1.  引用包 :  gocheck "gopkg.in/check.v1" 2. 自动化测试入口   :Test_run(t *testing.T) 3. 将自定义的测试用例集, ...

  6. 金仓Kingbase数据库网页数据维护分析工具

    金仓Kingbase是优秀的国产数据库产品,在能源,政务,国防等领域广泛使用, 现在TreeSoft数据库管理系统已支持Kingbase了,直接在浏览器中就可以操作查看Kingbase数据了,十分方便 ...

  7. ubuntu desktop 登录root账户

    有一些操作,登录root账户比较方便,但是ubuntu桌面版默认不允许这样,需要更改root账户的默认密码才可以登录,解决方法是按以下顺序输入: sudo passwd <你现在的用户的密码&g ...

  8. TF-IDF算法与余弦相似性

    (注:本文转载自阮一峰老师的博文,原文地址:http://www.ruanyifeng.com/blog/2013/03/cosine_similarity.html) 今天,我们再来研究另一个相关的 ...

  9. Shiro加盐加密

    接本人的上篇文章<Shiro认证.角色.权限>,这篇文章我们来学习shiro的加盐加密实现 自定义Realm: package com.czhappy.realm; import org. ...

  10. bootstrapvalidator API 文档地址: http://bootstrapvalidator.votintsev.ru/api/

    bootstrap验证插件 bootstrapvalidator 文档API 地址 (原始作者英文):http://bootstrapvalidator.votintsev.ru/api/ 具体使用( ...