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

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在事务中：

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

你也可以把它addConversation变成一个动作，它也是一个transaction：

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