reactjs - 未捕获的类型错误：无法读取未定义的属性“getBBox”

Question

我正在尝试在组件中显示流程图，但它显示无法读取未定义的属性。如果我将componentDidMount方法的内容移动到 render 方法，它不会显示任何错误，也不会在屏幕上呈现（打印）任何内容。

class Flowchart extends React.Component {
    constructor(props){
        super(props);
        this.svgRef=React.createRef();
        this.in=React.createRef();
        this.rdr={};
        this.svg={};
        this.graph={}
        this.inner={}
    }

    initStagesGraph(stages){
        this.svg = d3.select(this.svgRef.current)
        this.inner = this.svg.select("g")
        console.log(this.inner)
        this.rdr = new dagreD3.render();
        this.graph = new dagreD3.graphlib.Graph().setGraph({});
        _.forEach(stages,(stage)=>{
          this.graph.setNode(stage._id , { label:stage.title})
        })
        this.graph.setEdge("1","2",{label:"open"})
        this.graph.setEdge("2","1",{label:"Closed"})
        var zoom = d3.zoom().on("zoom", ()=> {
          this.inner.attr("transform", "translate(" + d3.event.translate + ")" +
          "scale(" + d3.event.scale + ")");
          });
        this.graph.nodes().forEach(v=> {
          var node = this.graph.node(v);
          node.rx = node.ry = 5;
        })
        this.svg.call(zoom)
        this.rdr(this.inner,this.graph);
      }
      componentDidMount(){
      const {stage}=this.props
      this.initStagesGraph(stage)
      }
    render() {           
        return (
            <div>
                <h2 className="heading-bdr">Flowchart</h2>
                <div className="workflow-chart">
                    <div className="col-sm-12">
                        <div className="live map">
                            <svg ref={this.svgRef}>
                              <g />
                            </svg>
                            <p>This is the flowchart component</p>
                        </div>
                    </div>
                </div>
        </div>
        )
    }
}