React组件首次挂载时图表无法渲染的问题求助

问题根源 #

1. 初始数据为空：父组件的fetchData1和fetchData2是异步请求，子组件MyClusterGraph在componentWillMount（已废弃的生命周期钩子）执行loadData时，props.data1和props.data2还是初始的空数组，处理后state里的nodes和links依然为空，导致图表无数据可渲染。
2. 未监听props更新：当父组件请求完成更新props后，子组件没有触发重新处理数据的逻辑，state保持为空，图表自然无法显示。
3. 废弃生命周期使用：componentWillMount已被React官方废弃，建议使用componentDidMount替代。

具体修改步骤 #

1. 修复子组件MyClusterGraph

• 替换componentWillMount为componentDidMount
• 添加componentDidUpdate监听props.data1和props.data2的变化，一旦数据更新就重新处理
• 在loadData中增加数据校验，避免空数组调用map报错
• 给linkColor增加默认值，避免出现undefined导致的渲染问题

修改后的子组件代码：

import '../styles/ClusterGraph.css';
import ForceGraph2D from 'react-force-graph-2d';
import React from "react";

class MyClusterGraph extends React.Component {
    constructor(props) {
        super(props);
        this.state = {nodes:[],links:[]};
    }

    componentDidMount() {
        this.loadData();
    }

    // 监听props变化，数据更新时重新处理
    componentDidUpdate(prevProps) {
        if (prevProps.data1 !== this.props.data1 || prevProps.data2 !== this.props.data2) {
            this.loadData();
        }
    }

    loadData = () => {
        // 校验数据是否存在，避免空数组map报错
        if (!this.props.data1.length || !this.props.data2.length) return;
        
        let nodes = this.props.data1.map(row => {
            let id = row.address_id;
            let addressHash = row.address_hash;
            let nodeColor = row.miner_address ? "blue" : "purple";
            return {id, addressHash, nodeColor};
        });
        
        let links = this.props.data2.map(row => {
            let source = row.address_id_1;
            let target = row.address_id_2;
            let linkColor;
            switch (row.link_type) {
                case 0:
                    linkColor="green";
                    break;
                case 1:
                    linkColor="red";
                    break;
                case 2:
                    linkColor="cyan";
                    break;
                default:
                    linkColor = "#ccc"; // 增加默认值，避免linkColor为undefined
            }
            return {source, target, linkColor};
        });
        this.setState({nodes, links});
    }

    render() {
        return (
            <div className="graph">
                <ForceGraph2D
                    graphData={this.state}
                    backgroundColor="white"
                    height={400}
                    width={700}
                    nodeLabel="addressHash"
                    nodeColor="nodeColor"
                    linkColor="linkColor" />
            </div>
        );
    }
}

function ClusterGraph({data1,data2}) {
    return (
        <div className="section2">
            <MyClusterGraph data1={data1} data2={data2} />
        </div>
    );
}

export default ClusterGraph;

2. 可选优化：父组件等待数据加载完成再渲染子组件

在父组件中判断cluster和subCluster是否有数据，再渲染ClusterGraph，避免子组件多次处理空数据：

// 父组件return部分修改
return (
    <div key={props.match.params.id}>
        <Fragment>
            <AddressList data={cluster} />
            {/* 等待两个数据都加载完成再渲染图表 */}
            {cluster.length > 0 && subCluster.length > 0 && (
                <ClusterGraph data1={cluster} data2={subCluster} />
            )}
        </Fragment>
    </div>
);

为什么修改代码后图表能显示？ #

当你修改子组件代码（比如删除linkColor）时，会触发组件重新挂载，此时父组件的异步请求已经完成，props里有了真实数据，loadData处理后state有内容，图表就能正确渲染。

内容的提问来源于stack exchange，提问作者Matteo