防止組件更新來自多個道具的反應

我有一個react/redux應用程序，它有一個recharts圖表，它在數據更改時進行動畫處理。防止組件更新來自多個道具的反應

我使用的是Redux，我的大部分操作只改變了一個state屬性，導致一個單一的props通過。但是，我的一些操作現在使用thunks進行一些異步操作並調用其他操作。

例如，我可能會有一個動作getChartData，當用戶選擇一個軸時，該動作將被調用。

export let getChartData = axis => dispatch => { 
    // trimmed for brevity 
    fetchJSON(url).then(data => { 
    dispatch(dataRetrievalSuccess(data)); 
    dispatch(updateSelectedAxis(axis)); 
    }).catch(error => { 
    dispatch(dataRetrievalError(error)); 
    }); 
};

在這個例子中updateSelectedAxis值將改變負責顯示當前選擇的軸線和dataRetrievalSuccess功能將是負責傳遞props.data到圖表的局部狀態屬性。

我試圖解決的問題是，當組件的selectedAxis道具更改但數據尚未更新時，阻止更新圖表。

我想我將能夠使用像componentWillRecieveProps但我在這裏與我上面的thunk例子的問題是，我得到一個呼叫componentWillRecieveProps當我打電話dataRetrievalSuccess其中有兩個this.props.data和nextProps.data所以同樣的數據I可以防止更新。但是，當我隨後致電updateSelectedAxis時，我沒有將data作爲道具的一部分，因爲它已經更改，所以我無法根據這兩個值執行邏輯操作。

我認爲這可能是一個訂購問題，但即使我將它包裝成單個動作，我仍然會獲得多個道具設置。

我可以通過將數據和軸的變化打包到單個對象來解決此問題嗎？我不太確定在建築方面採用這種方法的最佳方法，並歡迎提供任何建議。

編輯： 只是擴大一點，我調度兩個動作，這兩個動作都會改變他們自己的狀態，導致兩個呈現。

我試着寫是這樣的：

shouldComponentUpdate(nextProps, nextState) { 
    if(this.dataHasChanged(nextProps)) { 
    return true; 
    } 
    return false; 
}

幾乎工作，但每個數據的圖表顯示的時間是一個渲染的背後它必須這樣做。

來源

2017-01-03 dougajmcdonald

怎麼樣shouldComponentUpdate（nextProps，nextState）？ –

您提到的這個單一的州屬性包含DATA和AXIS？在其他世界上，在全球狀態下，您可以訪問這些變量？（和它可以通過this.props你傳遞給組件？如果你有權訪問這兩個對象，你可以使用componentShouldUpdate函數：> – MariuszJasinski

@DennisStücken問題是我得到兩個調用這個函數，一個與數據和一個與軸的變化，我需要兩個工作是否應該更新圖表動畫。 – dougajmcdonald

您可以使用thunk（作爲thunk爲您注入狀態）訪問動作創建者的當前存儲狀態，然後將ajax響應數據與以前的狀態數據進行比較以分派新動作。

export let getChartData = axis => (getState, dispatch) => { 
      // trimmed for brevity 
      fetchJSON(url).then(data => { 
      if(getState().data !== data){ 
      dispatch(dataRetrievalSuccess(data)); 
      dispatch(updateSelectedAxis(axis)); 
      } 
      }).catch(error => { 
      dispatch(dataRetrievalError(error)); 
      }); 
     };

來源

2017-01-04 07:32:22

防止組件更新來自多個道具的反應

回答

相關問題