在數據獲取期間更新負責顯示狀態的組件的狀態

Question

我正在嘗試在應用程序中創建一個狀態組件，這將在數據獲取和其他網絡相關事件期間進行更新。

componentWillReceiveProps(nextProps){ 
// This check is required otherwise setting state 
// from here will end up in a rendering loop 
if(!_.isEqual(this.props, nextProps)){ 
    if(nextProps.services.length != 0){ 
    if(nextProps.filters.length == 0){ 
     nextProps.setStatus('Fetching filters...'); 
     const { serviceId } = nextProps.params; 
     const serviceIndex = nextProps 
          .services 
          .findIndex(
           (service) => service.id == serviceId 
          ); 
     const serviceObj = nextProps.services[serviceIndex]; 
     nextProps.getFilters(serviceObj); 
    } 
    } 
}  

} 這裏我使用componentWillReceiveProps生命週期事件加載基於店內另一組數據的一些數據（由於依賴）。 setStatus方法負責使用新的狀態消息更新商店，並根據該狀態組件將被更新。在這裏你可以看到，我正在檢查過濾器是否爲空，我正在設置狀態並試圖獲取數據。現在，當我設置狀態時，它正在更新商店，從而再次啓動「渲染」過程。這將再次調用生命週期事件，並且由於過濾器仍爲空，它將再次執行數據提取請求。目前，我已停止使用這種方法

// Setting status will set the state and invoke data collection 
     // again as filters are still empty due to re-render 
     if(_.isEqual(this.props.status,nextProps.status) && 
     _.isEqual(this.props.filters,nextProps.filters)) { 
     const { serviceId } = nextProps.params; 
     const serviceIndex = nextProps 
           .services 
           .findIndex(
            (service) => service.id == serviceId 
           ); 
     const serviceObj = nextProps.services[serviceIndex]; 
     nextProps.getFilters(serviceObj); 
     } 

但是這種方法更像是一種黑客攻擊。你能否建議爲這個狀態組件提供更好的設計方法？我可以維護一個受控組件嗎？

Answer 1

我承認你所特別設法完成的事情對我來說有點不清楚，但從目前看來，我認爲你應該創建一個Redux事件來通知你的組件這個過程的不同步驟並響應行動創造者。如果您試圖在Redux商店外以某種方式跟蹤狀態，您將陷入麻煩。