javascript - 列表 : {[id]:array1} and list: {. ..state.list、[id] :array1} in ReactJs? 之间有什么区别

Question

这是我的状态:

state = {
    list: {}
};

在某些函数中，我将状态更改为:

let id = 'ab12'
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}]
this.setState({
    list: {
        ...state.list,
      [id]: array1
    }
});

我不明白我为什么使用(我引用了别人的代码):

list: {
  ...state.list,
  [id]: array1
}

但不是:

list: {
  [id]: array1
}

当我在 MDN Web 工具中尝试时，我得到了相同的结果，这就是我尝试过的:

let state = {
    list: {}
}
let id = 'ab12'
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}]
state = {
  list: {
    ...state.list, 
    [id]: array1
  }
}
console.log(state.list)

还有这个:

let state = {
    list: {}
}
let id = 'ab12'
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}]
state = {
  list: {
    [id]: array1
  }
}
console.log(state.list)

有什么区别？

Answer 1

简而言之:一种方法是将旧键值和新键值连接起来，另一种方法只是用新对象替换旧对象，新对象只有一个键。

<小时/>

就您而言，这两种方式没有区别，因为列表只包含一个键:

list: {
  ...state.list,
  [id]: array1
}


list: {
  [id]: array1
}

让我们假设列表是这样的:

list = {
   name: 'abc',
   address: 'abc',
}

现在您想在此处添加一个数组，通过以下方法，它将向现有对象添加一个新键，并且所有其他键将保持不变:

let id = 'ab12';
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}];

list = {
   ...list,
   [id]: array1
}

// list = {name: 'abc', address: 'abc', ab12: [...] }

但是如果你写:

list = {
   [id]: array1
}

仅输出:list = { ab12: [....] }，名称和地址将被删除。