Проблемы с использованием контекста

Question

Я изо всех сил пытаюсь понять, почему установка контекста с помощью assign не всегда работает. У меня есть очень простое приложение, которое вы можете найти здесь https://codesandbox.io/embed/y0xk1mo9x9

У меня есть этот контекст:

   {
      selectedItem: 0, //Fake Value
      nextSelectedItem: 0
    }

который обновляется этими функциями:

const decrementNextSelectItem = (context, event) => {
  console.log("decrementNextSelectItem: " + context.nextSelectedItem);

  assign({
    nextSelectedItem:
      context.nextSelectedItem > 0
        ? context.nextSelectedItem--
        : context.nextSelectedItem
  });

  console.log("decrementNextSelectItem is now: " + context.nextSelectedItem);
};

const incrementNextSelectItem = (context, event) => {
  console.log("incrementNextSelectItem: " + context.nextSelectedItem);

  assign({
    nextSelectedItem:
      context.nextSelectedItem < 5
        ? context.nextSelectedItem++
        : context.nextSelectedItem
  });

  console.log("incrementNextSelectItem is now: " + context.nextSelectedItem);
};

const updateCurrentSelectedItem = (context, event) => {
  console.log(" updateCurrentSelectedItem: " + context.selectedItem);

  assign({
    selectedItem: context.nextSelectedItem
  });

  console.log(" updateCurrentSelectedItem is now: " + context.selectedItem);
};

decrementNextSelectItem (связан с событием UP_KEY - нажмите стрелку вверх) и incrementNextSelectItem (связаны с событием DOWN_KEY - нажмите стрелку вниз) правильно называются:

incrementNextSelectItem: 0 
incrementNextSelectItem is now: 1 
DOWN KEY pressed 

incrementNextSelectItem: 1 
incrementNextSelectItem is now: 2 
DOWN KEY pressed 

incrementNextSelectItem: 2 
incrementNextSelectItem is now: 3 
DOWN KEY pressed 

decrementNextSelectItem: 3 
decrementNextSelectItem is now: 2 
UP KEY pressed 

Но updateCurrentSelectedItem (связан с событием OK_KEY - нажмите клавишу "o"), не работает должным образом:

updateCurrentSelectedItem: 0 
 updateCurrentSelectedItem is now: 0 
OK KEY pressed 

Есть ли причина? Схожу с ума.

Answer 1

То, как определены ваши действия, вызовет эту проблему, в ваших DecmentNextSelectItem и incrementNextSelectItem вы изменяете значения контекста при выполнении:

context.nextSelectedItem++

или

context.nextSelectedItem--

а затем в функции updateCurrentSelectedItem вы ожидаете, что использование assign, как вы использовали в других действиях, даст вам правильный результат:

assign({
  selectedItem: context.nextSelectedItem
});

но что вы действительно хотели сделать, так это определить свое действие так

const updateCurrentSelectedItem = assign({
  selectedItem: (context, event) => context.nextSelectedItem
})