私が作成したes6クラスから出てくる私のUI内のアイテムのリストをレンダリングするときに私が見ている問題を解決しようとしています。モデルは素晴らしいですが、私はアイテムのマウント、onEnter、onLeaveを聞いている（反応している）アニメーションを使用しています。ES6クラスのゲッター、一時的なリターンまたは代替の解決策
フィルタを適用してモデルをソートし、ゲッターを使用して新しいアイテムのリストを吐き出すと、リストは再ソートされているだけで変更されないため、一部のアイテムには適用されません。
私のゲッターは、クラスのthis.productsをつかんで返し、それにソート順を適用します。また、フィルターが適用されている場合（クラス内でthis._checkedListによって追跡される）、選択されたフィルターに基づいてthis.productsが縮小されます。だからゲッターはそうのようになります。
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が空の配列を受け取ることになります（たとえ分割秒であっても）、新しいソート/フィルタリングされたリストを新しいリストとして登録し、再度enter/leave/mountアニメーションを起動します。
私の試みのようなクラスのローカルプロパティを設定することでした -
this._tempReturn = false;
その後、ソートやフィルタが起こる機能で機能が実行されたときに、私は戻ってfalseに、その後、これをtrueに設定しますこのように -
toggleFilter(args) {
this._tempReturn = true;
...toggle logic
this._tempReturn = false;
}
その後、私は何かを行う前に、そのプロパティを確認するためにゲッターを変更し、それが本当ならば、空の配列を返す -
get productList() {
if (this._tempReturn) {
return [];
}
...
}
ただし、これは機能していないようです。 if (this._tempReturn) {にconsole.logを入れてもログは表示されませんでした。
私も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));
}
、これはどちらか動作しませんでした。だから、空の配列の戻り値がより良いアプローチかもしれないようです。
私はこれを達成するための方法があるのだろうと思っています - 私はおそらく、フィルタと並べ替えが適用されている間、配列が空に戻ります。
私はこの問題を間違った角度から見ているかもしれませんが、これを解決する方法はずっとあります。どんなアドバイスも読んでいただきありがとうございます！
ビューを2回レンダリングする必要があります。空の配列を1回、データをもう一度表示します。これは、イベント、コールバックまたは約束で実装できる非同期コンポーネントです。ただし、実装はReactの実装によって異なります。たとえば、reduxを使用している場合は、おそらく2つのアクション、つまり開始時に空の配列を持つストアと完全な実際のデータをロードする 'GET_ARRAY_START'と' GET_ARRAY_COMPLETE'のようなアクションがあります。どんな方法を選択するにしても、Reactに、データが準備できたら再レンダリングする時間が来るようにする必要があります。 – CaptEmulation
リストを空にしてソートして、変更を適切にレンダリングする必要はありません。あなたのアイテムに一意のキープロパティがあることを確認する必要があるように思えます。子のキープロパティを変更すると、常にその子を再レンダリングします。 –
@MikeDriverそれはそれでした！私はそれをチェックしていないために非常に馬鹿だと感じ、私はキーとしてインデックスを使用していた。回答を追加したい場合は、正しいとマークします。ありがとう!! – ajmajmajma