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

我正试图解决一个问题，我看到在我的ui中呈现一个来自我创建的es6类的项目列表。该模型工作得很好，但我使用的动画是听（在反应）挂载，onEnter，和onLeave的项目

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

所以我的getter只是获取类的

this.products

，然后返回它并对其应用排序顺序。如果应用了过滤器（由类中的

this.\u checkedList

跟踪），则

this.products

将根据选择的过滤器进行缩减，然后进行排序。所以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);
  }

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

我想弄明白的是，在过滤器或排序运行时，临时发回一个空数组的方法。原因是ui会收到一个空数组（即使是瞬间），react会将新的排序/筛选列表注册为新列表，并再次启动enter/leave/mount动画

我试图设置类的本地属性，如-

 this._tempReturn = false;

然后，在发生排序或筛选的函数中，我将其设置为true，然后在函数按如下方式执行时返回false-

    toggleFilter(args) {
      this._tempReturn = true;

      ...toggle logic

     this._tempReturn = false; 

   }

然后更改getter以在执行任何其他操作之前检查该属性，如果为真，则返回一个空数组-

    get productList() {  

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

然而，这似乎不起作用。即使将console.log放入

if（this.\u tempReturn）{

中，也没有显示任何日志

我还试着用lodash的

\uux.cloneDeep

发回一个新列表，如下所示：

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

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

这也不起作用，所以空数组返回可能是一种更好的方法

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

---

非常执着于如何实现，也许我甚至从错误的角度看待这个问题，并且有更好的方法来解决这个问题。欢迎提供任何建议，感谢阅读！

为了在更新列表中的项目时强制重新呈现它们，您只需确保每个项目都有一个唯一的

键

属性

---

不要先渲染列表，然后将其渲染为空，然后重新渲染已更改的列表。请确保每个子级都有唯一的键。更改数组中子级的键属性将始终导致其重新渲染。

您需要渲染视图两次，一次渲染空数组，另一次渲染数据。这是一个异步组件，可以n可以使用事件、回调或承诺来实现。但是，根据您的React实现，实现可能会有所不同。例如，如果使用redux，您可能会有两个操作—类似于

GET\u ARRAY\u START

和

GET\u ARRAY\u COMPLETE

，在开始和结束时，您将使用空数组加载存储上的实际数据已完成。无论您选择何种方法，您还需要一种方法来告诉React，一旦数据准备就绪，就应该重新呈现。您不需要将列表呈现为空，然后再进行排序，以便正确呈现更改。听起来您只需要确保您的项具有唯一的键属性。更改键p孩子的属性总是让react重新呈现孩子。@MikeDriver就是这样！我觉得没有检查这个问题太傻了，我用索引作为键。如果你想添加答案，我会标记为正确。谢谢！！@AjMajma会的，很高兴能帮上忙！