筛选列表上的mobx反应

问题描述

我想听听列表中特定项目的变化。我在列表上使用了reaction，并过滤了列表以获取需要收听的特定项目，但是当新的新项目添加到列表（在过滤列表之外）时，reaction会触发

这是我的代码：

const MyCustomModel = types
  .model({
    id: types.identifier,start: types.Date,end: types.Date,});

const MyStore = types
  .model({
    id: types.identifier,items: types.map(MyCustomModel),})
  .views(self => ({
    get itemsArray() {
      return Array.from(self.items.values());
    },}))
  .actions(self => {
    return {
      setListener(start: Date,end: Date) {
        myReactiondisposer = reaction(
          () =>
            self.itemsArray
              .filter(
                item =>
                  item.end.getTime() >= self.start.getTime() &&
                  item.start.getTime() <= self.end.getTime(),)
              .map(item=> item),() => {
            console.log('my reaction fires!');
            // other codes
          },);
      },});

例如，如果我听的范围是2020-09-20 00:00:00至2020-09-21 00:00:00 并在另一天{start: '2020-09-15 10:00:00',end: '2020-09-15 16:20:00'}中添加一个带有开始和结束值的新项目，那么反应就触发了！

解决方法

每次访问itemsArray（过滤器​​功能）中的每个项目时，都会触发该反应。

但是您可以选择从中返回什么。因此，您可以将空数组返回给您的副作用，因此它知道它不应该执行任何操作。

,

那是因为它总是从数据函数返回新数组（感谢urugator）
我需要更改equal函数以进行反应，它对我来说适用于浅比较器

reaction(data,effect,{ equals: comparer.shallow })