javascript - 避免React从以前的 Prop 更新中 overdraw

在下面，我描述了通过单击应用程序的NavItem触发的事件顺序：

我有一个具有子级ControlledTabs的子级React的MarkerGenesChart ScatterChart组件。在从一个ControlledTabs切换到另一个NavItem的最顶层setState()组件内部，我正在调用componentWillReceiveProps()，它会触发MarkerGenesChart中的MarkerGenesChart，因为它修改了我传递给它的一些道具。然后，其componentWillReceiveProps中的setState()正在调用componentWillReceiveProps，该触发器触发子ScatterChart的switching the NavItem。问题在于操作ScatterChart导致我最孩子的元素componentWillReceiveProps()调用ScatterChart两次：一次是最顶层的组件，另一次是中间的组件。第一次触发ScatterChart用旧数据绘制图表，第二次它触发更新的而不删除旧数据。

这是我更新nvd3组件中数据的方式：

    d3.select(node)
        .datum(data_func);
    chart.update();

我正在使用scatterChart nv.utils.windowResize(chart.update);，并且它具有this.forceUpdate()。当我只是调整窗口大小时，一切都会变得像我想要的那样。如何在添加新数据之前清理数据？或者也许我应该使用componentWillReceiveProps()，但是我几乎在所有地方都尝试过它，但无法使其正常工作。

任何建议将不胜感激。


  更新资料


我可以通过引入全局计数器并计算ScatterChart中的调用次数来部分解决此问题，但这显然是错误的方法。

最佳答案

chart.update();
this.forceUpdate();

不建议调用forceUpdate（），但这是迄今为止最简单的方法。