防止组件更新来自多个道具的反应

我有一个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

防止组件更新来自多个道具的反应

回答

相关问题