React Flow：EdgeLabelRenderer内调用useStore引发Hook错误

问题 #

开发Python流行病建模框架的React前端时，为React Flow的边添加自定义标签时触发无效Hook调用错误，错误指向EdgeLabelRenderer内部的useStore调用。已确认React与ReactDOM版本匹配，对比官方示例未发现明显差异。

错误信息 #

Error: Invalid hook call... 
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at useStore (index.mjs:30:1)
at EdgeLabelRenderer (EdgeLabelRenderer.js:9:1)
at renderWithHooks (react-dom.development.js:15486:1)
at mountIndeterminateComponent (react-dom.development.js:20103:1)
at beginWork (react-dom.development.js:21626:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)

相关代码 #

自定义边组件 #

import React from 'react';
import {getBezierPath, BaseEdge, EdgeLabelRenderer} from 'reactflow';

const TransitionEdge = ({ id, data, ...props }) => {
    const [edgePath, labelX, labelY] = getBezierPath(props);
    return (
        <>
            <BaseEdge id={id} path={edgePath} />
            <EdgeLabelRenderer>
                <div
                    style={{
                        position: 'absolute',
                        transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
                        background: '#ffcc00',
                        padding: 10,
                        borderRadius: 5,
                        fontSize: 12,
                        fontWeight: 700,
                    }}
                    className="nodrag nopan"
                >
                    {data.param}
                </div>
            </EdgeLabelRenderer>
        </>
    );
};

export default TransitionEdge;

ReactFlow传入代码 #

import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'react-flow-renderer';
import TransitionEdge from './edgeComponents/TransitionEdge';

// ...

const edgeTypes = {
    transition: TransitionEdge,       
};

// ...

<ReactFlow
 nodes={nodes}
 edges={edges}
 onNodesChange={onNodesChange}
 onEdgesChange={onEdgesChange}
 onConnect={onConnect}
 onNodeClick={onNodeClick}
 edgeTypes={edgeTypes}
/>

解决方法 #

1. 统一React Flow包导入路径 #

当前代码混用了旧版包react-flow-renderer和新版包reactflow，这会导致上下文隔离，触发Hook调用错误。需统一使用新版包：

• 卸载旧版包并安装新版：

  npm uninstall react-flow-renderer && npm install reactflow
  

• 修改所有React Flow相关导入为从reactflow包引入，包括ReactFlow组件和工具函数：

  // 替换原ReactFlow导入
  import ReactFlow, { useNodesState, useEdgesState, addEdge } from 'reactflow';
  

2. 检查重复安装的React #

重复安装的React实例会导致Hook上下文不匹配，运行以下命令检查：

npm ls react

如果输出多个React版本，清理依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

3. 确认组件上下文范围 #

确保EdgeLabelRenderer始终在ReactFlow组件的上下文范围内使用，你的自定义边组件通过edgeTypes传入ReactFlow的方式是正确的，无需调整这部分代码。

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