react-flow报错：Couldn’t create edge for source handle id: “undefined”

前言

最近在使用react-flow中，控制台报错：Couldn’t create edge for source handle id: “undefined”，刚开始查看时找不到原因，于是上官方git下，大概说的时Handle组件的问题。

代码分析

下面代码是我自定义node的代码，其中有个问题是： 我是动态判断去渲染上下两个连接点的。所以我直接让 firstOrLast === true 后，发现渲染没有问题。

{firstOrLast === 0 ? "" : <Handle type="target" position={Position.Top} />}
<NodeWrapper
	onDoubleClick={onNodeDbClicked}
	style={{
		width: width ?? 200 + "px",
		height: height ?? 32 + "px"
	}}>
	{getNodeIcon(type, resStatus, pduStatus, pduSid)}
	<NodeInfoWrapper>{`${title ?? "名称获取失败"}  `}</NodeInfoWrapper>
</NodeWrapper>
{firstOrLast === 2 ? "" : <Handle type="source" position={Position.Bottom} />}

解决问题

将中间节点的： firstOrLast 值设置为1，将最后一排的设置为2，第一排的设置为0，如此问题解决。

nodeClone.push({
	id: softInst.sid,
	type: "textUpdater",
	data: {
		sid: softInst.sid,
		title: software.name,
		firstOrLast: 1
	},
	position: { x: 0, y: 80 }
});

edgeClone.push({
	id: makeUuid(softInst.sid, computer.sid),
	source: computer.sid,
	target: softInst.sid
	// animated: true,
	// style: { stroke: "red" }
});

 最终效果

最后正常渲染