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

MobX computed runs before item is actually inserted into array

本文关键字：数组 运行 插入 计算 item MobX      更新时间：2023-09-26

我正在使用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']);
    }
}

你没有做错任何事。MobX API看起来像普通的JavaScript，但是每次一个可观察对象被更新时，它的所有观察者都在底层同步更新。在这种情况下，这不是问题，但是您可以将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');
}
相关文章：