[question] 请问使用Graphin，会报错:节点找不到id（Node not found for id），请问是否有遇到过这样的问题呢？

[liaodalin19903]

您好，参考：自定义ReactNode 代码：
https://g6.antv.antgroup.com/examples/element/custom-node#react-node

使用Graphin（v3.0.4）传入props运行时报错：

报错信息：
chunk-YRUATDGR.js?v=b81b149e:16670 Uncaught Error: Node not found for id: local-server-1

chunk-YRUATDGR.js?v=b81b149e:14032 The above error occurred in the component:

===

具体代码在react-demo-16-g6customnodeedge

关键代码：
src/components/ReactNode01.tsx

import { ExtensionCategory, NodeData, register } from '@antv/g6';
import { ReactNode } from '@antv/g6-extension-react';

import { Badge, Flex, Input, Tag, Typography } from 'antd';
const { Text } = Typography;
import { DatabaseFilled } from '@ant-design/icons';

register(ExtensionCategory.NODE, 'react', ReactNode);


export interface ReactNode01Data extends NodeData {
  data: {
    status: "success" | "warning" | "processing" | "error" | "default" | undefined,
    type: string,
    url: string
  }
}

export interface ReactNode01Props {
  data: ReactNode01Data, 
  onChange: (url: string) => void 
}

const ReactNode01 = (props: ReactNode01Props) => {

  const { data, onChange } = props 
  const { status, type } = data.data;

  return (
    <Flex
      style={{
        width: '100%',
        height: '100%',
        background: '#fff',
        padding: 10,
        borderRadius: 5,
        border: '1px solid gray',
      }}
      vertical
    >
      <Flex align="center" justify="space-between">
        <Text>
          <DatabaseFilled />
          Server
          <Tag>{type}</Tag>
        </Text>
        <Badge status={status} />
      </Flex>
      <Text type="secondary">{data.id}</Text>
      <Flex align="center">
        <Text style={{ flexShrink: 0 }}>
          <Text type="danger">*</Text>URL:
        </Text>
        <Input
          style={{ borderRadius: 0, borderBottom: '1px solid #d9d9d9' }}
          variant="borderless"
          value={data.data?.url}
          onChange={(event) => {
            const url = event.target.value;
            onChange?.(url);
          }}
        />
      </Flex>
    </Flex>
  );
};

export default ReactNode01

src/App.tsx

import { Graphin } from '@antv/graphin';
import { Graph } from '@antv/g6'
import ReactNode01, { ReactNode01Data } from './components/ReactNode01'

const APP = () => {

  const handleNodeChange = (url: string) => {
    console.log('回调url：', url)
  }
  
  const graphOptions = {
    
    data: {
      node: [
        {
          id: 'local-server-1',
          data: { status: 'success', type: 'local', url: 'http://localhost:3000' },
          style: { x: 50, y: 50 },
        },
        {
          id: 'remote-server-1',
          data: { status: 'warning', type: 'remote' },
          style: { x: 350, y: 50 },
        },
      ],
      edges: [{ id: 'edge-1', source: 'local-server-1', target: 'remote-server-1' }],
    },
    node: {
      type: 'react',
      style: {
        component: (data: ReactNode01Data) => <ReactNode01 data={data} onChange={handleNodeChange}/>
      }
    },
    behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
  }

  return (
    <div id='container'>
      <Graphin 
        options={graphOptions}
      ></Graphin>
    </div>
  )
};

export default APP 

[yvonneyx]

data.nodes 少打了个 s