ES6類getter，臨時返回或替代解決方案

我想解決一個問題，當我在我的用戶界面中呈現項目列表時，出現了我創建的es6類。模型運行良好，但是我正在使用正在偵聽（反應中）掛載，onEnter和onLeave項目的動畫。ES6類getter，臨時返回或替代解決方案

當我通過模型應用我的過濾器和排序，並通過吸氣劑回吐新項目列表時，動畫不適用於某些項目，因爲列表正在重新排序，未必會發生變化。

所以我的getter只是抓住類的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); 
    }

什麼，我想弄清楚，是一種能夠暫時發回一個空的陣列，同時在過濾器或排序運行。原因是用戶界面會收到一個空數組（即使是一瞬間），並作出反應將新的排序/過濾列表註冊爲新列表並再次啓動輸入/離開/裝載動畫。

我的嘗試是設置類等的本地屬性 -

this._tempReturn = 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)); 
    }

這也不能工作。所以看起來空數組返回可能是更好的方法。

我想知道是否有某種方式來實現這一點 - 我想有數組可能會返回空的一秒，也許過濾器和排序應用。

非常堅持如何實現，也許我甚至從錯誤的角度看待這個問題，並且有更好的方法來解決這個問題。任何建議將受到歡迎，感謝閱讀！

來源

2017-04-03 ajmajmajma

您需要渲染視圖兩次 - 一次使用空數組，再次使用數據。這是一個異步組件，可以通過事件，回調或承諾來實現。但是，實現會因您的React實現而有所不同。例如，如果使用redux，則可能會有兩個操作 - 例如'GET_ARRAY_START'和'GET_ARRAY_COMPLETE'，您將在此處啓動一個空數組並載入完整的實際數據。無論您選擇什麼方法，您還需要一種方法來告訴React，一旦數據準備就緒，您應該重新呈現它。 – CaptEmulation

您應該不需要將列表呈現爲空白，然後進行排序才能正確呈現更改。這聽起來像你只需要確保你的物品具有獨特的關鍵屬性。更改孩子的關鍵屬性將始終使孩子重新呈現。 –

@MikeDriver就是這樣！我沒有檢查，我感到非常愚蠢，我使用索引作爲關鍵。如果你想添加一個答案，我會標記爲正確的。謝謝！！ – ajmajmajma

爲了在更新列表時強制重新呈現列表中的項目，您只需確保每個項目都具有唯一的key屬性。

而不是渲染列表，然後渲染它爲空，然後重新渲染更改列表確保每個孩子都有一個唯一的關鍵。更改數組中的子項的key屬性將始終使其重新呈現。

來源

2017-04-03 16:45:14

ES6類getter，臨時返回或替代解決方案

回答

相關問題