React-Flow新增节点时Edge移位/消失问题求助

问题详情 #

• 新增节点时出现Edge移位或消失的情况，控制台报错：Couldn't create edge for source/target handle id: "some-id"; edge id: "some-id".，且sourceHandle和targetHandle始终为undefined
• 自定义了BiDirectionalNode.tsx节点，包含4个带唯一ID的双向Handle，示例代码：

<Handle type="source" position={Position.Left} id="leftA" />
<Handle type="target" position={Position.Left} id="leftB" />

• 使用类组件的state管理节点和Edge，通过handleClick方法新增节点，onConnect方法尝试创建双向Edge并保存
• 刚接触React一周，仅熟悉类组件写法，React-Flow官网示例均为hooks写法；尝试移除reactFlowKey后新增节点无法显示，多种调试无效

解决方案 #

1. 修复Handle ID未识别问题（sourceHandle/targetHandle为undefined） #

类组件中使用React Flow时，onConnect回调的参数需要正确接收，同时创建双向Edge时要确保Handle ID的映射正确：

onConnect = (params) => {
  // 自定义映射函数，根据当前Handle ID获取反向双向Handle的ID
  const getReverseHandle = (id) => {
    switch(id) {
      case 'leftA': return 'leftB';
      case 'leftB': return 'leftA';
      case 'rightA': return 'rightB';
      case 'rightB': return 'rightA';
      default: return id;
    }
  };

  // 创建正向和反向两条Edge，必须基于原数组生成新数组（不可变更新）
  const newEdges = [
    ...this.state.edges,
    {
      id: `edge-${Date.now()}-forward`,
      source: params.source,
      target: params.target,
      sourceHandle: params.sourceHandle,
      targetHandle: params.targetHandle,
    },
    {
      id: `edge-${Date.now()}-reverse`,
      source: params.target,
      target: params.source,
      sourceHandle: getReverseHandle(params.targetHandle),
      targetHandle: getReverseHandle(params.sourceHandle),
    },
  ];

  this.setState({ edges: newEdges });
};

2. 修复新增节点不显示/Edge移位问题 #

核心是保证nodes和edges的不可变更新，不能直接修改原state数组，必须创建新数组：

handleClick = () => {
  const newNode = {
    id: `node-${Date.now()}`,
    type: 'bidirectional',
    position: { x: Math.random() * 400, y: Math.random() * 400 },
    data: { label: `Node ${Date.now()}` },
  };

  // 用展开运算符创建新数组，让React检测到state变化
  this.setState({ nodes: [...this.state.nodes, newNode] });
};

• 不要随意移除reactFlowKey，React Flow会自动识别nodes/edges的变化，无需手动强制刷新；之前移除后节点不显示，是因为state更新方式错误导致React未触发重渲染

3. 自定义节点额外检查 #

确保BiDirectionalNode.tsx中的Handle ID是固定值（而非动态生成），比如直接写死id="leftA"，避免渲染时ID变化导致React Flow无法识别

内容的提问来源于stack exchange，提问作者Paweł Owczarek