React+Next项目中Highcharts NetworkGraph报forEach未定义错误求助

错误原因 #

你在使用NetworkGraph组件时，传入的customData是边数据数组，但组件内部错误地将data属性当作包含nodes字段的对象处理。在defaultOptions的series配置中，nodes: data?.nodes || []这一行，当传入的data是数组时，data.nodes会返回undefined，尽管有|| []兜底，但Highcharts NetworkGraph处理数据时，仍会因数据结构不匹配触发forEach读取undefined的错误。同时，组件默认的series[0].data是硬编码的测试数据，未替换为用户传入的边数据，进一步导致数据逻辑混乱。

修复步骤 #

1. 调整组件Props与数据映射 #

修改NetworkGraph组件的Props定义，明确区分边数据和节点配置数据，让用户传入的data直接作为边数据，新增独立的nodes Props用于自定义节点配置（可选）。

修改后的组件核心代码：

const NetworkGraph = ({
    data = [], // 边数据，格式为 [['from', 'to'], ...]
    nodes = [], // 可选：自定义节点配置数据
    titleText = "Custom graph",
    subtitleText = "A Force-Directed Network Graph in Highcharts",
    loading,
    options: userOptions = {}
}) => {
    const chartRef = useRef(null);

    useEffect(() => {
        if (chartRef.current && chartRef.current.chart) {
            loading ? chartRef.current.chart.showLoading('Loading...') : chartRef.current.chart.hideLoading();
        }
    }, [loading]);

    const defaultOptions = {
        chart: {
            type: 'networkgraph',
            height: '100%'
        },
        title: {
            text: titleText,
            align: 'left'
        },
        subtitle: {
            text: subtitleText,
            align: 'left'
        },
        plotOptions: {
            networkgraph: {
                keys: ['from', 'to'],
                layoutAlgorithm: {
                    enableSimulation: true,
                    friction: -0.9,
                    gravitationalConstant: 0.06
                }
            }
        },
        series: [{
            accessibility: {
                enabled: false
            },
            dataLabels: {
                enabled: true,
                linkFormat: '',
                style: {
                    fontSize: '0.8em',
                    fontWeight: 'normal'
                }
            },
            id: 'lang-tree',
            data: data, // 替换硬编码测试数据为用户传入的边数据
            nodes: nodes // 使用独立的nodes Props
        }],
        credits: { enabled: false }
    };

    const mergedOptions = Highcharts.merge(defaultOptions, userOptions);

    return (
        <div style={{ position: 'relative', minHeight: '400px' }}>
            <HighchartsReact
                ref={chartRef}
                highcharts={Highcharts}
                options={mergedOptions}
            />
        </div>
    );
};

export default NetworkGraph;

2. 修正组件调用方式 #

调用时直接传入边数据到data，如果需要自定义节点（比如设置节点名称、颜色），再传入nodes参数：

// ... 其他代码
const customData = [['s1', 't1'], ['s2', 't2']];
// 可选自定义节点示例
// const customNodes = [{ id: 's1', name: 'Source 1' }, { id: 't1', name: 'Target 1' }];

return (
    <NetworkGraph data={customData} loading={false} />
    // 带自定义节点的调用：<NetworkGraph data={customData} nodes={customNodes} loading={false} />
)

3. 可选：优化空数据兜底处理 #

为避免空数据导致异常，可在defaultOptions中给data和nodes添加更稳妥的兜底：

series: [{
    // ... 其他配置
    data: data.length ? data : [['default', 'default']],
    nodes: nodes.length ? nodes : []
}]

验证修复 #

修改后，Highcharts会正确接收边数据和节点数据，不会再出现Cannot read properties of undefined (reading 'forEach')错误，组件可正常渲染网络图。

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