Как добавить элемент в массив в объекте react?

Question

[Николай]

Условно есть такое состояние

const [filter, setFilter] = useState({type:"", duration: []});

как добавить значения из разных кнопок в этот массив?

Answer 1

[Сергей Соколов]

const { duration } = filter;

setFilter({
  ...filter,
  [ ...duration, 1, 2, 3 ], // добавили в массив 1, 2 и 3
});

// теперь state станет
// { type:"", duration: [1, 2, 3] }

Comments

[Alexandroppolus]

Если filter.duration уходит в пропсы memo-чилда, или в список депенденсов useXXXX, будет казус.
Лучше иммутабельно.

[Сергей Соколов]

Alexandroppolus, тащить библиотеку immer / useImmer ?

или просто

setFilter({
  ...filter,
  [ ...duration, 1, 2, 3 ],
});

[Николай]

Сергей Соколов, а если заполнять не сразу весь массив, а

setFilter({
  ...filter,
  [ ...duration, 1,],
});

setFilter({
  ...filter,
  [ ...duration, 2 ],
});

то значения перезаписываются и остается только 1 элемент массива

[Сергей Соколов]

Николай, вы это не забыли? const { duration } = filter;

[Николай]

Сергей Соколов, я начинающий только, извините, а что это значит?

[Николай]

Сергей Соколов, только сейчас заметил что вы ответили на вопрос, а что значит эта строчка?

[Николай]

Сергей Соколов, извините, но вы колдун, все работает