ES6类吸气器，临时返回或替代解决方案

Question

我正在尝试解决在 UI 中呈现来自我创建的 es6 类的项目列表时看到的问题。该模型运行良好，但是我正在使用正在侦听(在反应中)挂载，onEnter和onLeave的动画。

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

所以我的getter只是抓取类this.products并返回它并对其应用排序顺序。如果应用了过滤器(由类中的this._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);
}

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

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

this._tempReturn = false;

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

toggleFilter(args) {
this._tempReturn = true;
...toggle logic
this._tempReturn = false; 
}

然后在我做任何其他事情之前更改了 getter 以检查该属性，如果这是真的，请发回一个空数组 -

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

但是，这似乎不起作用。即使将控制台.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));
}

这也行不通。因此，空数组返回似乎是一种更好的方法。

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

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

Answer 1

为了在更新列表中强制重新呈现项目，您只需要确保每个项目都具有唯一的key属性。

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