React中setState修改深層對象

在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
            })           

總結:

| 方案 | 适用範圍 | 缺點

| :-: | :-: | :-: |

| 方案一 |多層級和單一層級都存在 | 寫法麻煩,單次對象指派,對象層級多的時候,容易遺漏

| 方案二 |隻适用與第一層級 | 隻适用第一層級

| 方案三 |多層級和單一層級都存在 | 若存在深層及和單一層級的,需要多次指派

這三種寫法都可以,使用哪一種方案,還需要根據業務來定.希望看了之後,能給大家帶來一些幫助,謝謝.