Question

所以我在我的应用程序中使用这个反应泡泡图表component。它位于主/主路线上。在初始页面加载时它工作正常。但是，如果一个导航然后再返回（react-router）它将无法加载并抛出错误：

Uncaught Error
    at extendBasis (enclose.js:41)
    at ./node_modules/d3-hierarchy/src/pack/enclose.js.__webpack_exports__.a (enclose.js:9)
    at packEnclose (siblings.js:104)
    at index.js:63
    at Node../node_modules/d3-hierarchy/src/hierarchy/eachAfter.js.__webpack_exports__.a [as eachAfter] (eachAfter.js:10)
    at ReactBubbleChartD3.pack [as bubble] (index.js:24)
    at ReactBubbleChartD3.update (bubble-chart-d3.js:255)
    at new ReactBubbleChartD3 (bubble-chart-d3.js:85)
    at BubbleChart.componentDidMount (index.jsx:163)
    at commitLifeCycles (react-dom.development.js:11505)
    at commitAllLifeCycles (react-dom.development.js:12294)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at commitAllWork (react-dom.development.js:12415)
    at workLoop (react-dom.development.js:12687)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at scheduleUpdateImpl (react-dom.development.js:13185)
    at scheduleUpdate (react-dom.development.js:13124)
    at Object.enqueueSetState (react-dom.development.js:9646)
    at Router../node_modules/react/cjs/react.development.js.ReactComponent.setState (react.development.js:218)
    at Router.js:70
    at listener (createTransitionManager.js:54)
    at createTransitionManager.js:73
    at Array.forEach (<anonymous>)
    at Object.notifyListeners (createTransitionManager.js:72)
    at setState (createBrowserHistory.js:95)
    at createBrowserHistory.js:120
    at Object.confirmTransitionTo (createTransitionManager.js:44)
    at handlePop (createBrowserHistory.js:118)
    at handlePopState (createBrowserHistory.js:102)

正如您所看到的那样导致d3-hierarchy出错。据我所知，一切都与在页面加载时运行时相同，因为它获取相同的数据。

react-bubble-chart模块有两个部分 - react组件和一个处理所有D3代码的es6类。 react组件在this.bubbleChart = new ReactBubbleChartD3()上运行componentDidMount，并在componentWillUnmount this.bubbleChart.destroy()上运行bubblechart类的destroy方法，但此方法在代码中为空。是否可能导致问题？

我尝试添加代码来删除该destroy方法中bubblechart容器中的html，但它没有任何区别。

有什么想法吗？

我在这里添加了文件 - https://gist.github.com/garytokyo/64982a5210c3a269f341d8934bb9a1ff

在bubble-chart-d3.js中，以下代码导致错误（第254行或其中）：

const circles = this.svg
    .selectAll('circle')
    .data(this.bubble(nodes).descendants(), d => 'g' + d.data._id);

更具体地说，它是this.bubble(nodes)

与react和react-router

0 个答案: