React Flow节点Handle类型切换功能失效问题求助

尝试在React Flow节点上添加按钮，实现Handle的source/target类型切换，但功能失效。DevTools显示Handle类型已切换，但在画布中连接节点时，Handle仍表现为原类型。已尝试调整切换逻辑、更新父状态等操作，均未解决问题。预期左右Handle能在source和target间切换且功能正常，但实际画布中不符合预期。

节点代码 #

import { memo } from 'react';
import { Handle, Position } from 'reactflow';

interface AgentNodeData {
  type: string;
  name: string;
  systemMessage?: string;
  leftHandleType: 'source' | 'target';
  rightHandleType: 'source' | 'target';
  onChange: (id: string, field: string, value: string) => void;
}

interface AgentNodeProps {
  data: AgentNodeData;
  id: string;
}

const getArrowIcon = (handleType: 'source' | 'target', position: Position) => {
  if (position === Position.Left) {
    return handleType === 'source' ? 'fa-arrow-circle-right' : 'fa-arrow-circle-left';
  } else if (position === Position.Right) {
    return handleType === 'source' ? 'fa-arrow-circle-left' : 'fa-arrow-circle-right';
  }
  return 'fa-arrow-circle-right'; // Default case
};

const AgentNode = memo(({ data, id }: AgentNodeProps) => {
  const handleSwitchClick = () => {
    const newLeftHandleType = data.leftHandleType === 'source' ? 'target' : 'source';
    const newRightHandleType = data.rightHandleType === 'source' ? 'target' : 'source';
  
    console.log('Switching handles:', {
      id,
      newLeftHandleType,
      newRightHandleType,
    });
  
    data.onChange(id, 'leftHandleType', newLeftHandleType);
    data.onChange(id, 'rightHandleType', newRightHandleType);
  };

  return (
    <div className="px-4 py-2 shadow-md rounded-lg bg-card border border-border relative">
      <div className="flex items-center gap-2">
        <div className="text-lg font-bold text-foreground flex items-center gap-2">
          {data.type}
          <button
            className="hover:scale-110 transition-transform duration-300"
            onClick={handleSwitchClick}
            aria-label="Switch arrow directions"
          >
            <i className="fas fa-arrow-right-arrow-left"></i>
          </button>
        </div>
      </div>
      <div className="flex flex-col gap-2 mt-2">
        <input
          type="text"
          placeholder="Name"
          defaultValue={data.name}
          onChange={(e) => data.onChange(id, 'name', e.target.value)}
          className="text-sm text-muted-foreground bg-transparent border-none focus:outline-none w-full"
        />
        <input
          type="text"
          placeholder="System Message"
          defaultValue={data.systemMessage}
          onChange={(e) => data.onChange(id, 'systemMessage', e.target.value)}
          className="text-sm text-muted-foreground bg-transparent border-none focus:outline-none w-full"
        />
      </div>

        <Handle
          type={data.leftHandleType}
          position={Position.Left}
          className="!bg-transparent !border-none !w-auto !h-auto"
          key={`left-${data.leftHandleType}`} // Force re-render when handle type changes
        >
          <i
            className={`fas ${getArrowIcon(data.leftHandleType, Position.Left)} text-primary`}
            style={{ fontSize: '1.2rem', pointerEvents: 'none' }}
          />
        </Handle>
        
        <Handle
          type={data.rightHandleType}
          position={Position.Right}
          className="!bg-transparent !border-none !w-auto !h-auto"
          key={`right-${data.rightHandleType}`} // Force re-render when handle type changes
        >
          <i
            className={`fas ${getArrowIcon(data.rightHandleType, Position.Right)} text-primary`}
            style={{ fontSize: '1.2rem', pointerEvents: 'none' }}
          />
        </Handle>
    </div>
  );
});

AgentNode.displayName = 'AgentNode';

export default AgentNode;

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