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和增量NextSelectItem中更改上下文值：

context.nextSelectedItem++

或

context.nextSelectedItem--

，然后在updateCurrentSelectedItem函数中，您希望像在其他操作中使用的那样使用assign将为您提供正确的结果：

assign({
  selectedItem: context.nextSelectedItem
});

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

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

使用上下文的问题

1 个答案: