graph.off取消绑定处理有误 #5630

问题描述

graph的绑定事件内部涉及react状态变量时，会与react的状态更新并不同步，比如 ` const [status, setStatus] = useState('1')

graph.on('node:click', () => { console.log(status) }) ` 在其他逻辑变更status值的时候，通过click触发，依旧打印的是原始值'1'。

因此需要对于react的状态变量变更，绑定方法需要同步状态变量更新而重新绑定，才能获取到最新状态值。 useEffect(() => { if(graph){ graph.off('node:click', funcName); graph.on('node:click', funcName); } }, [xxx]) 然而off操作没有实际取消绑定

我的代码逻辑如下 useEffect(() => { if (graph) { console.log(graph.getEvents()['node:click']); graph.off('node:click', nodeClickHandler); graph.on('node:click', nodeClickHandler); } }, [graph, timeRange, boardModalMode]);

1. 页面加载后控制台结果 可见一共node:click一共绑定了两个方法，一个是method是graph原有的，用于创建连线等的内部behaviour。第二个是我自己写的方法nodeClickHandler。此时没有问题

2.状态变量boardModalMode变更两次后，触发执行off和on事件两次，原本预计node:click应该继续只绑定两个方法，但实际控制台结果 变成了四个事件，可见boardModalMode变更两次，on事件的确执行了两次并绑定成功，但是off事件没有成功执行两次去除绑定，导致变成了四个事件。展开事件对象，可见1 2 3元素的属性name均是nodeClickHandler，印证了没有解绑的问题

重现链接

https://codesandbox.io/p/sandbox/react-new?file=%2Fsrc%2Findex.js%3A7%2C38&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cluqpc63m00063b6ph7lajj4k%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cluqpc63m00023b6p80xn87yn%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cluqpc63m00033b6ptyxooswp%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cluqpc63m00053b6pmv97ee0u%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cluqpc63m00023b6p80xn87yn%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluqpc63l00013b6ppwm0g344%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A7%252C%2522startColumn%2522%253A38%252C%2522endLineNumber%2522%253A7%252C%2522endColumn%2522%253A38%257D%255D%257D%255D%252C%2522id%2522%253A%2522cluqpc63m00023b6p80xn87yn%2522%252C%2522activeTabId%2522%253A%2522cluqpc63l00013b6ppwm0g344%2522%257D%252C%2522cluqpc63m00053b6pmv97ee0u%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluqpc63m00043b6pv2znxt61%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cluqpc63m00053b6pmv97ee0u%2522%252C%2522activeTabId%2522%253A%2522cluqpc63m00043b6pv2znxt61%2522%257D%252C%2522cluqpc63m00033b6ptyxooswp%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cluqpc63m00033b6ptyxooswp%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

重现步骤

直接打开控制台看打印结果

预期行为

预期打印一个包含两个元素的数组 实际数组的长度会持续增加

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response