React中setState修改深层对象

简介: React中setState修改深层对象
在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的:
state = {
     list: {
        objA: {
          name: 'A',
          age: 20
        },
        objB: {
          name: 'B',
          age: 25
        },
        objC: {
          show: false
        },
        objD: 'D'
      }
}

这时需要我们修改listobjA中的name属性和objD的属性,遇到这样的情况我们一般会使用什么办法解决呢?其实有三种解决方案:

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

  this.setState({
     list: {
         ...this.state.list,
          objA: {
             ...this.state.list.objA,
                  name: 'A1'
                }
              }
            })

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

  let data = Object.assign({}, this.state.list, {objD: 'D1'})
    this.setState({
              list: data
            })

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

  let data = this.state.list;
      data.objA.name = 'A1';
      data.objD = 'D1';
      this.setState({
              list: data
            })

总结:

| 方案 | 适用范围 | 缺点
| :-: | :-: | :-: |
| 方案一 |多层级和单一层级都存在 | 写法麻烦,单次对象赋值,对象层级多的时候,容易遗漏
| 方案二 |只适用与第一层级 | 只适用第一层级
| 方案三 |多层级和单一层级都存在 | 若存在深层及和单一层级的,需要多次赋值

这三种写法都可以,使用哪一种方案,还需要根据业务来定.希望看了之后,能给大家带来一些帮助,谢谢.
目录
相关文章
|
6月前
|
前端开发 JavaScript
React 中 setState 什么时候是同步的,什么时候是异步的
React 中 setState 什么时候是同步的,什么时候是异步的
62 0
|
8月前
|
前端开发 JavaScript
react的setState是异步还是同步
react的setState是异步还是同步
|
4天前
|
前端开发
说说React中setState和replaceState的区别?
在 React 中,setState()和 replaceState()是用于更新组件状态的两个方法。它们之间有一些区别
21 0
|
4天前
|
前端开发 算法
React中的setState执行机制?
React中的setState执行机制?
|
4天前
|
前端开发
React中setState方法详细讲解
React中setState方法详细讲解
|
4天前
|
前端开发 JavaScript
react中的useState为什么是一个数组,而不是一个对象?
react中的useState为什么是一个数组,而不是一个对象?
46 0
|
4天前
|
前端开发 JavaScript 算法
react中的setState的执行机制
react中的setState的执行机制
24 0
|
4天前
|
前端开发
【React学习】—SetState的使用(九)
【React学习】—SetState的使用(九)
|
6月前
|
前端开发 JavaScript 数据管理
react数据管理之setState与Props
react数据管理之setState与Props
46 0
|
7月前
|
前端开发
React-组件-setState
React-组件-setState
25 0