javascript - 未捕获的类型错误 : Cannot read property 'ownerDocument' of null - ReactJS

Question

我尝试使用 D3 绘制条形图并通过 React 的 render 方法渲染它。我的index.js如下，

import React from 'react';
import ReactDOM from 'react-dom';
import './Styles/index.css';
import BarChart from './Components/BarChart'

class App extends React.Component {
    render() {
        return (
            <div>
            <h3> SmaRT - A Dash Board</h3>
            <BarChart data={[1,3,5,7,11]} size={[500,500]}/>
            </div>
        );
    }
}

ReactDOM.render( <App/>, document.getElementById('app'))

本质上，我将数据和大小传递给 BarChart 函数。我的BarChart.js如下，

import React from 'react';
import { scaleLinear } from 'd3-scale';
import { max } from 'd3-array';
import { select } from 'd3-selection';
import '../Styles/index.css';

class BarChart extends React.Component {
    constructor(props) {
        super(props);
        this.createBarChart = this.createBarChart.bind(this);
    }

    componentDidMount(){
        this.createBarChart();
    }

    componentDidUpdate(){
        this.createBarChart();
    }

    createBarChart() {
        const node = this.node;
        const dataMax = max(this.props.data);
        const yScale = scaleLinear().domain([0,dataMax]).range([0, this.props.size[1]]);

        select(node).select('div').data(this.props.data).enter().append('div')

        select(node).select('div').data(this.props.data).exit().remove()

        select(node).select('div').data(this.props.data).style('fill', '#FE9922').attr('x', (d,i) => i * 25).attr('y', d => this.props.size[1] - yScale(d))
        .attr('height', d => yScale(d)).attr('width', 25)
    }

    render(){
        return <svg ref={node => this.node = node} width={500} height={500}></svg>
    }
}

export default BarChart;

检查页面元素后发现，svg 元素正在按照 BarChart.js 中规定的尺寸进行渲染，但该函数并未占用传递的“size”参数。

另外，react开发者工具通过报错如下，

Uncaught TypeError: Cannot read property 'ownerDocument' of null
    at new EnterNode (enter.js?19a3:9)
    at    Uncaught TypeError: Cannot read property 'ownerDocument' of null
    at new EnterNode (enter.js?19a3:9)
    at bindIndex (data.js?1427:21)
    at Selection.__webpack_exports__.a [as data] (data.js?1427:100)
    at BarChart.createBarChart (BarChart.js?1e85:26)
    at BarChart.componentDidMount (BarChart.js?1e85:14)
    at eval (ReactCompositeComponent.js?063f:264)
    at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75)
    at eval (ReactCompositeComponent.js?063f:263)
    at CallbackQueue.notifyAll (CallbackQueue.js?7abf:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js?2d36:80)
    EnterNode @ enter.js?19a3:9
    bindIndex @ data.js?1427:21
    __webpack_exports__.a @ data.js?1427:100
    createBarChart @ BarChart.js?1e85:26
    componentDidMount @ BarChart.js?1e85:14
    (anonymous) @ ReactCompositeComponent.js?063f:264
    measureLifeCyclePerf @ ReactCompositeComponent.js?063f:75
    (anonymous) @ ReactCompositeComponent.js?063f:263
    notifyAll @ CallbackQueue.js?7abf:76
    close @ ReactReconcileTransaction.js?2d36:80
    closeAll @ Transaction.js?91bc:209
    perform @ Transaction.js?91bc:156
    batchedMountComponentIntoNode @ ReactMount.js?0cc2:126
    perform @ Transaction.js?91bc:143
    batchedUpdates @ ReactDefaultBatchingStrategy.js?bdd7:62
    batchedUpdates @ ReactUpdates.js?be0d:97
    _renderNewRootComponent @ ReactMount.js?0cc2:319
    _renderSubtreeIntoContainer @ ReactMount.js?0cc2:401
    render @ ReactMount.js?0cc2:422
    (anonymous) @ index.jsx?cca3:17
    (anonymous) @ bundle.js:1047
    __webpack_require__ @ bundle.js:20
    (anonymous) @ bundle.js:63
    (anonymous) @ bundle.js:66
    bindIndex (data.js?1427:21)
    at Selection.__webpack_exports__.a [as data] (data.js?1427:100)
    at BarChart.createBarChart (BarChart.js?1e85:26)
    at BarChart.componentDidMount (BarChart.js?1e85:14)
    at eval (ReactCompositeComponent.js?063f:264)
    at measureLifeCyclePerf (ReactCompositeComponent.js?063f:75)
    at eval (ReactCompositeComponent.js?063f:263)
    at CallbackQueue.notifyAll (CallbackQueue.js?7abf:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js?2d36:80)
    EnterNode @ enter.js?19a3:9
    bindIndex @ data.js?1427:21
    __webpack_exports__.a @ data.js?1427:100
    createBarChart @ BarChart.js?1e85:26
    componentDidMount @ BarChart.js?1e85:14
    (anonymous) @ ReactCompositeComponent.js?063f:264
    measureLifeCyclePerf @ ReactCompositeComponent.js?063f:75
    (anonymous) @ ReactCompositeComponent.js?063f:263
    notifyAll @ CallbackQueue.js?7abf:76
    close @ ReactReconcileTransaction.js?2d36:80
    closeAll @ Transaction.js?91bc:209
    perform @ Transaction.js?91bc:156
    batchedMountComponentIntoNode @ ReactMount.js?0cc2:126
    perform @ Transaction.js?91bc:143
    batchedUpdates @ ReactDefaultBatchingStrategy.js?bdd7:62
    batchedUpdates @ ReactUpdates.js?be0d:97
    _renderNewRootComponent @ ReactMount.js?0cc2:319
    _renderSubtreeIntoContainer @ ReactMount.js?0cc2:401
    render @ ReactMount.js?0cc2:422
    (anonymous) @ index.jsx?cca3:17
    (anonymous) @ bundle.js:1047
    __webpack_require__ @ bundle.js:20
    (anonymous) @ bundle.js:63
    (anonymous) @ bundle.js:66

任何人都可以阐明我做错了什么以及如何解决这个问题吗？非常感谢。

Answer 1

发现错误，是由于BarChart.js的createBarChart函数中的select语句造成的

select(node).selectAll('rect')

而不是

select(node).select('div')

不知何故，代码放错了地方。 D3 中的 selectAll 选择作为参数提供给它的所有匹配关键字，在本例中为“rect”。 SVG 应使用提供的内容绘制矩形。而这正是必须渲染的。

感谢那些试图在头脑中理解和解决/调试这个问题的人。