MobX

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 值呈现书名。

这是一个fiddle： 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);
  }
}

MobX - 从计算值中过滤 asMap？

MobX - Filter asMap from computed value?

javascript