Почему не распространяются атрибуты, работают с React useState hook

Question

Я сохраняю состояние в функциональном компоненте с помощью ловушки useState и хочу обновить одно значение без необходимости явно устанавливать все остальные атрибуты, поэтому я подумал, что использование оператора распространения будет работать, но это не так!

Это мое состояние:

const [state, setState] = useState({
  data: [],
  currentIndex: 0,
  editMode: false
});

Может кто-нибудь объяснить, почему это не работает ...

setState({ editMode: value, ...state });

... когда это работает:

setState({ editMode: value, data: [], currentIndex: 0 });

Какая разница? Могу ли я использовать оператор распространения или что-то неправильно понял?

Вот пример CodeSandbox , чтобы продемонстрировать проблему.

Answer 1

Все дело в заказе. Подумайте о следующем:

const state = {
  data: [],
  currentIndex: 0,
  editMode: false
};
const value = true;

const result = { editMode: value, ...state };
const result2 = { editMode: value, data: [], currentIndex: 0 };
const result3 = { ...state, editMode: value };

console.log(result);
console.log(result2);
console.log(result3);

Надеюсь, это поможет!

Answer 2

Выполнение { editMode: value, ...state } эквивалентно:

{                                   {
  editMode: value,                    
  data: [],                           data: [],
  currentIndex: 0,      ------->      currentIndex: 0,
  editMode: false                     editMode: false
}                                   }

Поскольку ключи не могут повторяться в объектах, последняя пара editMode ключ-значение перезаписывает первую, удаляя первую editMode: value. Вместо этого вы можете распространять сначала:

{...state, editMode: value}

Это заменит editMode в вашем state новым объектом editMode:

{                                   {
  data: [],                           data: [],
  currentIndex: 0,                    currentIndex: 0,
  editMode: false,      ------->      
  editMode: value,                    editMode: value,
}                                   }

Answer 3

Просто измените порядок в обратном порядке:

setState({ ...state, editMode: value });

В противном случае вы перезаписываете значение editMode старым значением.

Answer 4

Чтобы обновить Object с помощью useState, используйте синтаксис этой функции:

setState(prevState => ({ ...prevState, editMode: value }));