В чем разница между списком: {[id]: array1} и списком: {... state.list, [id]: array1} в 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, и вот что я попробовал:

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
}

помогает сохранить предыдущие значения списка, просто добавьте новость. Это похоже на объединение предыдущих значений с новыми. Это похоже на использование Object.assign: если ключ уже существует, его значение будет обновлено, в противном случае ключ / значение будет добавлено к объекту. но это

list: {
  [id]: array1
}

просто замените предыдущее значение новым.

Answer 2

Вкратце: один способ объединит старые значения ключей и новое значение ключа, а другой просто заменит старый объект новым объектом, который будет иметь только один ключ.

---

В вашем случае нет разницы между этими двумя способами, потому что список содержит только один ключ:

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
}

Вывод будет: * только 1016 *, имя и адрес будут удалены.