xflow-bot[bot]
commented
2 years ago 👋 @asdyin142
Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
问题描述
教程/解决方案/流程图 例子,自定义节点onload中回显报错.直接把数据绑定在XFlow标签同样报错
重现链接
https://codesandbox.io/s/cool-leftpad-9v355n?file=/App.tsx
重现步骤
文档例子地址:https://xflow.antv.vision/zh-CN/docs/tutorial/solutions/flow 1,在例子中 添加自定义节点,点击保存按钮.控制台拿到保存的数据. 2.在例子的 index.tsx文件 引入XFlowGraphCommands,NsGraphCmd.
import { XFlowGraphCommands } from '@antv/xflow' import type { NsGraphCmd } from '@antv/xflow'3.在index.tsx中定义上边步骤1控制台拿到的数据const graphData = { "nodes": [ { "id": "node-146a61b2-1476-4981-b7ba-ecb1f919b381", "renderKey": "Process", "name": "Process", "label": "111", "width": 60, "height": 40, "ports": { "items": [ { "group": "top", "id": "c685a00f-49c1-4b8a-83f7-6b069fff2ca9" }, { "group": "right", "id": "ac360268-7f8d-49c8-83ac-dae5db4f18b4" }, { "group": "bottom", "id": "3b6f0a5a-1e27-4577-a314-070bf76e7035" }, { "group": "left", "id": "08d88c8d-209e-4777-9ca8-b371a1b1aeb0" } ], "groups": { "top": { "position": { "name": "top" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "right": { "position": { "name": "right" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "bottom": { "position": { "name": "bottom" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "left": { "position": { "name": "left" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 } } }, "x": 470, "y": 140, "zIndex": 10 }, { "id": "node-0e3df9b9-3f86-4afd-adc9-eac68792b4a3", "renderKey": "Terminal", "name": "Terminal", "label": "222", "width": 60, "height": 40, "ports": { "items": [ { "group": "top", "id": "3b011470-ac88-4e90-8923-a2b656f0ec31" }, { "group": "right", "id": "7d640371-50da-474d-8db6-a59cd8387842" }, { "group": "bottom", "id": "250dc5c4-ad44-4fe8-bdf4-0e066d578e36" }, { "group": "left", "id": "9141cb04-ab8d-477f-ab26-36696154b635" } ], "groups": { "top": { "position": { "name": "top" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "right": { "position": { "name": "right" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "bottom": { "position": { "name": "bottom" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "left": { "position": { "name": "left" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 } } }, "x": 640, "y": 200, "zIndex": 10 }, { "id": "node-5c5bdaad-ece3-444c-8258-1363132664e5", "renderKey": "custom-node-indicator", "name": "custom-node-indicator", "label": "自定义节点", "width": 162, "height": 130, "ports": { "items": [ { "group": "top", "id": "381844f1-0fa0-473b-97aa-bfd7e973b9c8" }, { "group": "right", "id": "9577b057-8871-48dc-b2cd-1bd8d9e094d7" }, { "group": "bottom", "id": "4d18ed9d-d412-4993-995a-6a8aa363f853" }, { "group": "left", "id": "4bb4f95e-bc13-40ac-92cf-9f47647421b1" } ], "groups": { "top": { "position": { "name": "top" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "right": { "position": { "name": "right" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "bottom": { "position": { "name": "bottom" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 }, "left": { "position": { "name": "left" }, "attrs": { "circle": { "r": 4, "magnet": true, "stroke": "#31d0c6", "strokeWidth": 2, "fill": "#fff", "style": { "visibility": "hidden" } } }, "zIndex": 10 } } }, "originData": { "name": "custom-node-indicator", "width": 162, "height": 130, "label": "自定义节点" }, "isCustom": true, "x": 397, "y": 240, "zIndex": 10 } ], "edges": [] }4.onload方法中初始化const onLoad: IAppLoad = async app => { graphRef.current = await app.getGraphInstance() await app.executeCommand(XFlowGraphCommands.GRAPH_RENDER.id, { graphData, } as NsGraphCmd.GraphRender.IArgs) }5.报错 6.注释初始化数据方法,用定时器异步执行const onLoad: IAppLoad = async app => { graphRef.current = await app.getGraphInstance() time(app) } const time = (app) => { setTimeout(() => { app.executeCommand(XFlowGraphCommands.GRAPH_RENDER.id, { graphData, } as NsGraphCmd.GraphRender.IArgs) }) }7.成功预期行为
预期onload可以回显自定义数据 或者 XFlow标签可以直接绑定数据回显
平台
屏幕截图或视频（可选）
补充说明（可选）
No response