React中setState修改深层对象

ゞ浴缸里的玫瑰 2024-04-19 09:06 69阅读 0赞

在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的:

state = {
         list: {
            objA: {
              name: 'A',
              age: 20
            },
            objB: {
              name: 'B',
              age: 25
            },
            objC: {
              show: false
            },
            objD: 'D'
          }
    }

这时需要我们修改`list`中`objA`中的`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
                })

### 总结: ###

<table> 
 <thead> 
  <tr> 
   <th>方案</th> 
   <th>适用范围</th> 
   <th>缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>方案一</td> 
   <td>多层级和单一层级都存在</td> 
   <td>写法麻烦,单次对象赋值,对象层级多的时候,容易遗漏</td> 
  </tr> 
  <tr> 
   <td>方案二</td> 
   <td>只适用与第一层级</td> 
   <td>只适用第一层级</td> 
  </tr> 
  <tr> 
   <td>方案三</td> 
   <td>多层级和单一层级都存在</td> 
   <td>若存在深层及和单一层级的,需要多次赋值</td> 
  </tr> 
 </tbody> 
</table>

这三种写法都可以,使用哪一种方案,还需要根据业务来定.希望看了之后,能给大家带来一些帮助,谢谢.

2人点赞

[ReactNative][]

[ReactNative]: https://www.jianshu.com/nb/10309422