javascript - ES6 类 getter、临时返回或替代解决方案

Question

我正在尝试解决在我的 ui 中渲染来 self 创建的 es6 类的项目列表时遇到的问题。该模型运行良好，但是我使用的动画正在监听(在 react 中)项目的安装、onEnter 和 onLeave。

当我通过模型应用过滤器和排序并通过 getter 返回新的项目列表时，动画不适用于某些项目，因为列表只是被重新排序，不一定会更改。

所以我的 getter 只是获取类的 this.products 并将其返回并对其应用排序顺序。如果应用了过滤器(由类中的 this._checkedList 跟踪)，则 this.products 会根据选择的过滤器进行缩减，然后进行排序。所以 setter/getter 看起来像这样:

  get productList() {
    if (this._checkedList.length > 0) {
      const filteredProducts = _.reduce(this.filterMap, reduceFilters, []);
      const deDuped = _.uniq(filteredProducts, 'id');

      return this.applySort(deDuped);
    }
    const deDuped = _.uniq(this.products, 'id');

    return this.applySort(deDuped);
  }

我想弄清楚的是一种在过滤器或排序运行时临时发回空数组的方法。原因是用户界面将收到一个空数组(即使是一瞬间)，并且 react 会将新的排序/过滤列表注册为新列表，并再次触发进入/离开/安装动画。

我的尝试是设置类的本地属性，例如 -

 this._tempReturn = false;

然后在发生排序或过滤的函数中，我将其设置为 true，然后在函数完成时返回 false -

    toggleFilter(args) {
      this._tempReturn = true;

      ...toggle logic

     this._tempReturn = false; 

   }

然后更改 getter 以在执行其他操作之前检查该属性，如果是 true，则发回一个空数组 -

    get productList() {  

       if (this._tempReturn) {
        return  [];
       }
     ...
    }

但是，这似乎不起作用。即使将 console.log 放入 if (this._tempReturn) { 也没有显示任何日志。

我还尝试使用 lodash 的 _.cloneDeep 发回一个新列表，如下所示:

   get productList() {
    if (this._checkedList.length > 0) {
      const filteredProducts = _.reduce(this.filterMap, reduceFilters, []);
      const deDuped = _.uniq(filteredProducts, 'id');

      return _.cloneDeep(this.applySort(deDuped));
    }
    const deDuped = _.uniq(this.products, 'id');

    return _.cloneDeep(this.applySort(deDuped));
  }

这也不起作用。所以看起来空数组返回可能是一个更好的方法。

我想知道是否有某种方法可以实现此目的 - 我希望在应用过滤器和排序时让数组返回空一秒钟。

非常困惑如何实现，也许我什至从错误的 Angular 看待这个问题，并且有更好的方法来解决这个问题。欢迎任何建议，感谢您的阅读!

Answer 1

为了在更新列表中的项目时强制重新渲染它们，您只需确保每个项目都有唯一的 key 属性。

不要渲染列表，然后将其渲染为空，然后重新渲染更改的列表，确保每个子项都有唯一的键。更改数组中子级的关键属性总是会导致其重新渲染。