过滤 asMap 计算值维护排序顺序？

Question

使用 Mobx，我试图以 booksSortedIdArray:

中相同的顺序输出 booksByIdMap 中的书名

class BookStore {
  @observable booksSortedIdArray = ["88cd7621", "88cd7624", "88cd7623", "88cd7622"];
  @observable booksByIdMap = asMap({
    "88cd7621": {
      "id": "88cd7621",
      "title": "The Secret"
    },
    "88cd7622": {
      "id": "88cd7622",
      "title": "The Alchemist"
    },
    "88cd7623": {
      "id": "88cd7623",
      "title": "Javascript"
    },
    "88cd7624": {
      "id": "88cd7624",
      "title": "PHP"
    }
  });

  @computed get byBookId() {
    return this.booksByIdMap.values().filter(b => this.booksSortedIdArray.includes(b.id));
  }
}

byBookId 中的 filter 似乎没有保持排序顺序而是输出：

The Secret, The Alchemist, Javascript, PHP

相对于：

The Secret, PHP, Javascript, The Alchemist

这里是fiddle.

如何根据booksSortedIdArray中id的排序输出标题？

Answer 1

您可以对数组使用 reduce 并尝试 get 映射中的每个键。如果它存在，只需将它添加到结果中。 This way you will get it in order:

class BookStore {
  @observable booksSortedIdArray = ["88cd7621", "88cd7624", "88cd7623", "88cd7622"];
  @observable booksByIdMap = asMap({
    "88cd7621": {
      "id": "88cd7621",
      "title": "The Secret"
    },
    "88cd7622": {
      "id": "88cd7622",
      "title": "The Alchemist"
    },
    "88cd7623": {
      "id": "88cd7623",
      "title": "Javascript"
    },
    "88cd7624": {
      "id": "88cd7624",
      "title": "PHP"
    }
  });

  @computed get byBookId() {
    return this.booksSortedIdArray.reduce((res, el) => {
      const book = this.booksByIdMap.get(el);
      if(book) {
        res.push(book);
      }
      return res;
    }, []);
  }
}

过滤 asMap 计算值维护排序顺序？

Filter asMap computed value maintaining sort order?

javascript

mobx