Question

我正在将React与MobX结合使用。我使用带有可观察数组的存储（对话），并希望提供此数组的排序版本作为计算属性。添加新会话时，会在将会话添加到数组之前评估计算属性sortedConversations。在下面的小示例中，“重新排序会话”始终在“添加的会话”之前记录。我做错了吗？

class Store {

    ...

    @observable conversations = [];

    addConversation(conversation) {
      this.conversations.push(conversation);
      console.log('Added conversation');
    }

    @computed
    get sortedConversations() {
      console.log('Reordering conversations');
      return _.orderBy(this.conversations.slice(), ['lastUpdated'], ['asc']);
    }
}

Answer 1

你没有做错任何事。 MobX API看起来像常规JavaScript，但每次更新observable时，其所有观察者都会同步更新。在这种情况下，这不是问题，但您可以将addConversation的内容包装在transaction中：

addConversation(conversation) {
  transaction(() => {
    this.conversations.push(conversation);
    console.log('Added conversation');
  });
}

您还可以将addConversation变为action，这也是transaction：

@action
addConversation(conversation) {
  this.conversations.push(conversation);
  console.log('Added conversation');
}

MobX计算在项实际插入数组之前运行

1 个答案: