使用上下文的问题

Question

我正在努力理解为什么使用 assign 设置 Context 并不总是有效。我有一个非常简单的应用程序，您可以在这里找到 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

您的操作定义方式会给您带来这个问题，在您的 decrementNextSelectItem 和 incrementNextSelectItem 中，您在执行以下操作时会改变上下文值：

context.nextSelectedItem++

或

context.nextSelectedItem--

然后在您的 updateCurrentSelectedItem 函数中，您希望使用赋值，就像您在其他操作中使用的那样会得到正确的结果：

assign({
  selectedItem: context.nextSelectedItem
});

但你真正想做的是像这样定义你的动作

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

使用上下文的问题

Problems with using Context

javascript

reactjs

xstate