luzidchris
commented
3 months ago Update: For testing purposes, I changed the way the onNodeDrag callback is defined:
/**
* 节点拖拽回调函数
* @param event - 事件对象
* @param node - 当前拖拽的节点信息
* @param nodes - 所有节点信息
*/
//const onNodeDrag: NodeDragHandler = useCallback( <========= original
const onNodeDrag = useCallback( <========= now
(_, node, nodes) => {
//event: React.MouseEvent, node: Node, nodes: Node[]
if (nodes.length > 2 || node.data.name !== 'Group') return
const intersections = reactFlowInstance
.getIntersectingNodes(node)
.filter((n: any) => n.data.name !== 'Group' && (n.parentNode === node.id || !n.parentNode))
.map((n: any) => n.id)
onSetNodesGroup(intersections, node)
},
[reactFlowInstance]
)The message described above disappeared, certainly with unknown side-effects, but I thought it would make sense to see what would happen after applying the modification.
It seems that no additional errors were reported, i.e., the system now aborts after hitting the next exception, which is about Maximum update depth exceeded. Details on that can be found below.
Error message
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. checkForNestedUpdates
Callstack
http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:219421:11 scheduleUpdateOnFiber http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:217541:3 dispatchSetState http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:209570:37 ./node_modules/.pnpm/@rc-component+trigger@2.2.0_react-dom@18.1.0_react@18.1.0react@18.1.0/node_modules/@rc-component/trigger/es/index.js/generateTrigger/Trigger</setTargetRef< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:67259:21 ./node_modules/.pnpm/rc-util@5.41.0_react-dom@18.1.0_react@18.1.0react@18.1.0/node_modules/rc-util/es/hooks/useEvent.js/useEvent/memoFn< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:188646:114 imperativeHandleEffect http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:209180:16 commitHookEffectListMount http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:215225:26 commitLayoutEffectOnFiber http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:215343:42 commitLayoutMountEffects_complete http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216754:34 commitLayoutEffects_begin http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216740:40 commitLayoutEffects_begin http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216722:36 commitLayoutEffects_begin http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216722:36 commitLayoutEffects http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216678:28 commitRootImpl http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:218955:24 commitRoot http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:218814:19 performSyncWorkOnRoot http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:218249:13 flushSyncCallbacks http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:204190:22 ./node_modules/.pnpm/react-dom@18.1.0_react@18.1.0/node_modules/react-dom/cjs/react-dom.development.js/ensureRootIsScheduled/< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:217783:13 VoidFunctionensureRootIsScheduled http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:217775:26 scheduleUpdateOnFiber http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:217604:26 forceStoreRerender http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:209025:24 handleStoreChange http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:209004:25 ./nodemodules/.pnpm/zustand@4.5.2@types+react@18.3.3_react@18.1.0/node_modules/zustand/esm/vanilla.mjs/createStoreImpl/setState/< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:307155:47 setState http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:307155:17 handleNodeClick http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:264502:11 startDrag http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:264626:36 ./nodemodules/.pnpm/@reactflow+core@11.11.3@types+react@18.3.3_react-dom@18.1.0_react@18.1.0__react@18.1.0/node_modules/@reactflow/core/dist/esm/index.mjs/useDrag/</dragHandler< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:264652:34 call http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:267064:72 gesture http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:268326:16 mousedowned http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:268240:12 ./node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/selection/on.js/contextListener/< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:269713:14 EventListener.handleEvent./node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/selection/on.js/onAdd/< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:269752:10 WEBPACK_DEFAULT_EXPORT http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:269212:37 WEBPACK_DEFAULT_EXPORT http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:269775:32 drag http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:268219:10 WEBPACK_DEFAULT_EXPORT http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:268856:12 ./nodemodules/.pnpm/@reactflow+core@11.11.3@types+react@18.3.3_react-dom@18.1.0_react@18.1.0react@18.1.0/node_modules/@reactflow/core/dist/esm/index.mjs/useDrag/< http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:264712:27 commitHookEffectListMount http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:215225:26 commitPassiveMountOnFiber http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216992:38 commitPassiveMountEffects_complete http://192.168.3.130:8000/mf-dep__vendor.1c1c08c1.js:216957:34 commitPassiveMountEffects_begin http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216944:41 commitPassiveMountEffects http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:216932:34 flushPassiveEffectsImpl http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:219166:28 flushPassiveEffects http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:219111:14 commitRootImpl http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:219062:5 commitRoot http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:218814:19 performSyncWorkOnRoot http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:218249:13 flushSyncCallbacks http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:204190:22 flushSync http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:218333:7 scheduleRefresh http://192.168.3.130:8000/mf-dep____vendor.1c1c08c1.js:219925:14 attach/renderer.scheduleRefresh http://192.168.3.130:8000/:8827:16 ./node_modules/.pnpm/react-refresh@0.14.0/node_modules/react-refresh/cjs/react-refresh-runtime.development.js/performReactRefresh/< .kitchen-comfyui/node_modules/.pnpm/react-refresh@0.14.0/node_modules/react-refresh/cjs/react-refresh-runtime.development.js:265 performReactRefresh .kitchen-comfyui/node_modules/.pnpm/react-refresh@0.14.0/node_modules/react-refresh/cjs/react-refresh-runtime.development.js:254 ./node_modules/.pnpm/@umijs+react-refresh-webpack-plugin@0.5.11_react-refresh@0.14.0_type-fest@4.18.3_webpack@5.91.0/node_modules/@umijs/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js/createDebounceUpdate/enqueueUpdate/refreshTimeout< .kitchen-comfyui/node_modules/.pnpm/@umijs+react-refresh-webpack-plugin@0.5.11_react-refresh@0.14.0_type-fest@4.18.3_webpack@5.91.0/node_modules/@umijs/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js:100 setTimeout handler*enqueueUpdate .kitchen-comfyui/node_modules/.pnpm/@umijs+react-refresh-webpack-plugin@0.5.11_react-refresh@0.14.0_type-fest@4.18.3_webpack@5.91.0/node_modules/@umijs/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js:98 executeRuntime .kitchen-comfyui/node_modules/.pnpm/@umijs+react-refresh-webpack-plugin@0.5.11_react-refresh@0.14.0_type-fest@4.18.3_webpack@5.91.0/node_modules/@umijs/react-refresh-webpack-plugin/lib/runtime/RefreshUtils.js:270 $ReactRefreshModuleRuntime$ http://192.168.3.130:8000/p__index.310fa90cf7c040c2.hot-update.js:335:34 ./src/pages/FlowEditor.tsx http://192.168.3.130:8000/p__index.310fa90cf7c040c2.hot-update.js:348:29 options.factory webpack:/kitchen-comfyui/webpack/runtime/react refresh:6 __webpack_require__ .kitchen-comfyui/webpack/bootstrap:24
Related source code
Uncompiled
Location: .kitchen-comfyui/webpack/bootstrap:24
21 | var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
22 | __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
23 | module = execOptions.module;
> 24 | execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
| ^ 25 | } catch(e) {
26 | module.error = e;
27 | throw e;Compiled
Location: http://192.168.3.130:8000/umi.js:2474:33
2471 | /******/ var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
2472 | /******/ __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
2473 | /******/ module = execOptions.module;
> 2474 | /******/ execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
| ^ 2475 | /******/ } catch(e) {
2476 | /******/ module.error = e;
2477 | /******/ throw e;
💻 系统环境 | Operating System
Ubuntu
🌐 浏览器 | Browser
Firefox
🐛 问题描述 | Bug Description
Dragging nodes seems to cause trouble: As soon as a node's title bar is clicked to drag the node. The exception which is raised is this:
Firefox web development tools' console contains several error messages. The content of the console log is this:
🚦 期望结果 | Expected Behavior
📷 复现步骤 | Recurrence Steps
📝 补充信息 | Additional Information
No response