Javascript MobX-从计算值筛选asMap？

我正在尝试

asMap

，希望输出与

coverType

匹配的书籍标题：

这是

书店

：

class BookStore {
    @observable coverType = 'soft';
    @observable booksByIdMap = asMap({
      "88cd7621": {
        "id": "88cd7621",
        "title": "The Secret",
        "coverType": 'soft'
      },
      "88cd7622": {
        "id": "88cd7622",
        "title": "The Alchemist",
        "coverType": 'hard'
      },
      "88cd7623": {
        "id": "88cd7623",
        "title": "Javascript",
        "coverType": 'soft'
      }
    });

    @computed get byCoverType() {
      return this.booksByIdMap.filter(book => book.coverType == this.coverType);
    }
}

以下是用户界面：

const bookStore = new BookStore();

const BookViewItem = observer(({book}) => 
    <li>
        {book.title}
    </li>
);

@observer
class BookView extends Component {
  render() {
    return <div>
      <h1>Books With Cover Type: {bookStore.coverType}</h1>
      <ul>
        {bookStore.byCoverType().map(book => 
          <BookViewItem book={book} key={book.id} />
         )}
      </ul>
     </div>
  }
}

const bookStore=new bookStore（）；
const BookViewItem=观察者（{book}）=>

{书名}

);
@观察者
类BookView扩展组件{
render（）{
返回
封面类型为的书籍：{bookStore.coverType}

{bookStore.byCoverType（）.map（book=>
)}

}
}

但它不会基于当前的

coverType

值呈现图书标题

这是一把小提琴：

---

如何使用计算的

Bookstore.byCoverType

筛选结果输出图书标题？

MobX映射不是数组，因此它没有筛选器和其他特定于数组的方法。检查一下

例如，您可以使用

values

方法，然后对生成的数组使用

filter

：

---

谢谢@Tholle，这很好用，但我很难通过

bookIdsArray

进行过滤。这是小提琴：，传递了

bookIdsArray

，但什么也没有显示。我不知道如何通过书籍ID数组过滤原始地图，因此我从地图返回它们，并使用计算的

byBookId

@Wonka You's welcome。这甚至不是你问题的一部分。尝试

this.booksByIdMap.values（）.filter（b=>bookIdsArray.includes（b.id））是的，你说得对，对不起，但我只是想确保我了解如何通过ID和计算来过滤地图。谢谢@Tholle帮我澄清：）
class BookStore {
  @observable coverType = 'soft';
  @observable booksByIdMap = asMap({
    "88cd7621": {
      "id": "88cd7621",
      "title": "The Secret",
      "coverType": 'soft'
    },
    "88cd7622": {
      "id": "88cd7622",
      "title": "The Alchemist",
      "coverType": 'hard'
    },
    "88cd7623": {
      "id": "88cd7623",
      "title": "Javascript",
      "coverType": 'soft'
    },
  });

  @computed get byCoverType() {
    return this.booksByIdMap.values().filter(b => b.coverType === this.coverType);
  }
}