I'm trying to display a node graph in React Flow with code like this:

import React, { useState, useCallback, useEffect, useRef  } from 'react';
import { 
    ReactFlow, 
    Background, 
    Controls, 
    ReactFlowProvider, 
    addEdge, 
    useNodesState,
    useEdgesState,  
    useReactFlow, 
    applyNodeChanges, 
    useUpdateNodeInternals   } from '@xyflow/react';
import './PageEditRoute.css';
import '@xyflow/react/dist/style.css';

const defaultlNodes = [
    {
      id: '1',
      data: { label: 'Старт' },
      position: { x: 100, y: 50 },
      type: 'input',
    },
    {
      id: '2',
      data: { label: 'Финиш' },
      position: { x: 100, y: 400 },
      type: 'output',
    },
    {
      id: '3',
      data: { label: 'Просто узел' },
      position: { x: 100, y: 150 },
      type: 'default',
    },
];

const defaultEdges = [
    { id: '1-2', source: '1', target: '3'  },
];
    
function Flow() {   
    const { addNodes } = useReactFlow();
    const [nodes, setNodes, onNodesChange] = useNodesState(defaultlNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(defaultEdges);
    
    const onClick = useCallback(() => {
        const id = Math.floor(Math.random() * 10000);
        const newNode = {
            id,
            draggable: true, 
            selectable: true, 
            connectable: true, 
            deletable: true, 
            position: {
                x: 100,
                y: 250,
            },
        data: {
            label: `Node ${id}`,
        },
        style: {
            visibility: "visible",
        }
      };
      addNodes(newNode);
    }, [addNodes]);
    
    const onConnect = useCallback(
        (params) => setEdges((eds) => addEdge(params, eds)),
        [],
    );

    return (
      <>
      <button onClick={onClick} className="btn-add">add node</button>
        <ReactFlow
            nodes={nodes}
            edges={edges}
            onNodesChange={onNodesChange} 
            onEdgesChange={onEdgesChange} 
            onConnect={onConnect} 
            fitView
        />
        
      </>
    );
}

export default function PageEditRoute(){

    return(
        <div style={{ height: '80%'}}>
            <ReactFlowProvider>
                <Flow />
            </ReactFlowProvider>
        </div>
    );
    
}

When creating a new node (onClick event), it is successfully created. But the created node cannot be connected to other nodes, and when you move it, a warning is displayed in the console:

It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.

Searches in the documentation did not help - all initialization methods, as I understand it, relate to changing the properties of nodes, and not adding them. Where did I go wrong?

I'm trying to display a node graph in React Flow with code like this:

import React, { useState, useCallback, useEffect, useRef  } from 'react';
import { 
    ReactFlow, 
    Background, 
    Controls, 
    ReactFlowProvider, 
    addEdge, 
    useNodesState,
    useEdgesState,  
    useReactFlow, 
    applyNodeChanges, 
    useUpdateNodeInternals   } from '@xyflow/react';
import './PageEditRoute.css';
import '@xyflow/react/dist/style.css';

const defaultlNodes = [
    {
      id: '1',
      data: { label: 'Старт' },
      position: { x: 100, y: 50 },
      type: 'input',
    },
    {
      id: '2',
      data: { label: 'Финиш' },
      position: { x: 100, y: 400 },
      type: 'output',
    },
    {
      id: '3',
      data: { label: 'Просто узел' },
      position: { x: 100, y: 150 },
      type: 'default',
    },
];

const defaultEdges = [
    { id: '1-2', source: '1', target: '3'  },
];
    
function Flow() {   
    const { addNodes } = useReactFlow();
    const [nodes, setNodes, onNodesChange] = useNodesState(defaultlNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(defaultEdges);
    
    const onClick = useCallback(() => {
        const id = Math.floor(Math.random() * 10000);
        const newNode = {
            id,
            draggable: true, 
            selectable: true, 
            connectable: true, 
            deletable: true, 
            position: {
                x: 100,
                y: 250,
            },
        data: {
            label: `Node ${id}`,
        },
        style: {
            visibility: "visible",
        }
      };
      addNodes(newNode);
    }, [addNodes]);
    
    const onConnect = useCallback(
        (params) => setEdges((eds) => addEdge(params, eds)),
        [],
    );

    return (
      <>
      <button onClick={onClick} className="btn-add">add node</button>
        <ReactFlow
            nodes={nodes}
            edges={edges}
            onNodesChange={onNodesChange} 
            onEdgesChange={onEdgesChange} 
            onConnect={onConnect} 
            fitView
        />
        
      </>
    );
}

export default function PageEditRoute(){

    return(
        <div style={{ height: '80%'}}>
            <ReactFlowProvider>
                <Flow />
            </ReactFlowProvider>
        </div>
    );
    
}

When creating a new node (onClick event), it is successfully created. But the created node cannot be connected to other nodes, and when you move it, a warning is displayed in the console:

It seems that you are trying to drag a node that is not initialized. Please use onNodesChange as explained in the docs.

Searches in the documentation did not help - all initialization methods, as I understand it, relate to changing the properties of nodes, and not adding them. Where did I go wrong?

• reactjs
• react-flow

1 Answer 1

I think that you only need to merge the new nodes before you add them on ur onClick event.

Something like that

    const { addNodes, getNodes } = useReactFlow();

    const onClick = useCallback(() => {
        const id = Math.floor(Math.random() * 10000);
        const newNode = {...node};

        // here is what you need to do before adding the notes
        applyNodeChanges(newNode, getNodes());

        // i would use setNodes here instead of addNotes but thats up to you
        addNodes(newNode);
    }, [addNodes]);