MobX - asMapを計算値からフィルタリングしますか？

Question

私はasMapをしようとして出力するcoverTypeに一致する書籍のタイトルたいのです：

をここではBookStore次のとおりです。ここで

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); 
    } 
} 

はUIです：

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> 
    } 
} 

しかし、それはしていません現在のcoverType値に基づいて書籍のタイトルを表示します。 https://jsfiddle.net/ob7v1gk5/

どのように出力本のタイトルが計算Bookstore.byCoverTypeフィルタリングされた結果を使用してすることができます：ここで

はフィドルのですか？

Answer 1

MobXマップは配列ではないため、フィルタやその他の配列固有のメソッドはありません。 documentation to see what methods you can useを確認してください。

valuesメソッドを使用して、結果の配列like thisにfilterを使用します。

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); 
    } 
}