Question

下面我将介绍通过点击我的应用的NavItem触发的事件序列：

我有一个ControlledTabs React组件，其中有一个孩子MarkerGenesChart，其中有一个孩子ScatterChart。在从一个ControlledTabs切换到另一个NavItem时，在最顶层的setState()组件中，我正在调用componentWillReceiveProps()，它会在MarkerGenesChart中触发MarkerGenesChart，因为它会修改一些道具我转达它。然后，componentWillReceiveProps中的setState()正在调用componentWillReceiveProps来触发孩子ScatterChart的{{1}}。问题是，switching the NavItem操作导致我的最基本元素ScatterChart两次调用componentWillReceiveProps()：一次是最顶层组件，另一次是中间组件。它第一次触发ScatterChart使用旧数据绘制图表，第二次添加更新的图表而不删除旧数据。

以下是我如何更新ScatterChart组件中的数据：

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

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

任何建议都将不胜感激。

更新

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

Answer 1

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

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

Answer 2

我正在componentDidUpdate()和componentWillReceiveProps()中绘制图表，因为如果我不这样做，我的某些功能会被破坏。 componentWillReceiveProps正在绘制旧数据，然后componentDidUpdate()正在添加新数据。这就是我遇到问题的原因，而不是因为componentWillReceiveProps被调用了两次。我完全删除了componentWillReceiveProps并修复了我的应用程序中被删除而破坏的其他部分。

避免React从以前的道具更新中透支过度

2 个答案: