ReactJs 中的 list: {[id]:array1} 和 list: {...state.list, [id]:array1} 有什么区别？

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 网络工具中尝试时，我得到了相同的结果，这就是我尝试的结果：

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: [....] }，姓名和地址将被删除。

Answer 2

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

帮助您保留列表的先前值，只需添加新闻一项。这就像以前的值与新值的串联。这就像使用 Object.assign：如果一个键已经存在，他的值将被更新，否则一个 key/value 被添加到对象。但是这个

list: {
  [id]: array1
}

只需用新值替换以前的值即可。

ReactJs 中的 list: {[id]:array1} 和 list: {...state.list, [id]:array1} 有什么区别？

What's the difference between list: {[id]:array1} and list: {...state.list, [id]:array1} in ReactJs?

javascript

hashmap

ecmascript-6

reactjs

spread-syntax