0

Below is a simplified version of the function giving me this error. I think it meets all the requirements as its being called from a button click in the UI and not from another JavaScript function.

function LoadData() {
  const [graphData, setJsonResults] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const data = await GetData();
      setJsonResults(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {graphData.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

and this function that loads the initial html into the browser which contains the button click that calls the LoadData function.

export default function App() {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <button className="MyNewButton" onClick={LoadData}>Load Data</button>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={setNodes}
        onEdgesChange={setEdges}
      >
        <Controls />
        <MiniMap />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}

Can someone kindly explain why I'm getting this error and how to resolve it?

Thank you.

and for good measure, here's my package.json:

{
  "name": "my-react-flow-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "antd": "^5.3.3",
    "neo4j-driver": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "reactflow": "^11.7.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.2.0"
  }
}

also to make sure I don't have mismatching versions of React and React DOM:

npm ls react-dom
├─┬ antd@5.3.3
│ ├─┬ @ant-design/cssinjs@1.7.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @ant-design/icons@5.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @rc-component/mutate-observer@1.0.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @rc-component/tour@1.8.0
│ │ ├─┬ @rc-component/portal@1.1.1
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ @rc-component/trigger@1.6.2
│ │ ├─┬ rc-align@4.0.15
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-cascader@3.9.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-checkbox@2.3.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-collapse@3.5.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-dialog@9.0.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-drawer@6.1.5
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-dropdown@4.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-field-form@1.28.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-image@5.15.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-input-number@7.4.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-input@0.2.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-mentions@2.1.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-menu@9.8.3
│ │ ├─┬ rc-overflow@1.3.0
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-motion@2.6.3
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-notification@5.0.3
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-pagination@3.3.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-picker@3.3.4
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-progress@3.4.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-rate@2.10.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-resize-observer@1.3.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-segmented@2.1.2
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-select@14.3.0
│ │ ├─┬ rc-virtual-list@3.4.13
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-slider@10.1.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-steps@6.0.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-switch@4.0.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-table@7.31.1
│ │ ├─┬ @rc-component/context@1.3.0
│ │ │ └── react-dom@18.2.0 deduped
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tabs@12.5.10
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-textarea@1.1.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tooltip@6.0.1
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tree-select@5.7.0
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-tree@5.7.3
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-trigger@5.3.4
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-upload@4.3.4
│ │ └── react-dom@18.2.0 deduped
│ ├─┬ rc-util@5.29.3
│ │ └── react-dom@18.2.0 deduped
│ └── react-dom@18.2.0 deduped
├── react-dom@18.2.0
└─┬ reactflow@11.7.0
  ├─┬ @reactflow/background@11.2.0
  │ └── react-dom@18.2.0 deduped
  ├─┬ @reactflow/controls@11.1.11
  │ └── react-dom@18.2.0 deduped
  ├─┬ @reactflow/core@11.7.0
  │ └── react-dom@18.2.0 deduped
  ├─┬ @reactflow/minimap@11.5.0
  │ └── react-dom@18.2.0 deduped
  ├─┬ @reactflow/node-resizer@2.1.0
  │ └── react-dom@18.2.0 deduped
  ├─┬ @reactflow/node-toolbar@1.1.11
  │ └── react-dom@18.2.0 deduped
  └── react-dom@18.2.0 deduped

PS:

I changed the LoadData function to this but still get the same error:

const LoadData =()=>{
  const [graphData, setJsonResults] = useState([]);

  return (
    <div>
      Happy Days are here again
    </div>
  )  
}
spacedog
  • 446
  • 3
  • 13

2 Answers2

0

The issue is that LoadData is being used as an event handler, not a component. You should do something like:

function LoadData({ shouldLoad }) {
  const [graphData, setJsonResults] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const data = await GetData();
      setJsonResults(data);
    }

    if (shouldLoad) {
      fetchData();
    }
  }, [shouldLoad]);

  return (
    <div>
      {graphData.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

export default function App() {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);
  const [shouldLoad, setShouldLoad] = useState(false);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <button className="MyNewButton" onClick={() => setShouldLoad(true)}>Load Data</button>
      <LoadData shouldLoad={shouldLoad} />
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={setNodes}
        onEdgesChange={setEdges}
      >
        <Controls />
        <MiniMap />
        <Background variant="dots" gap={12} size={1} />
      </ReactFlow>
    </div>
  );
}
Joe Lissner
  • 2,181
  • 1
  • 15
  • 21
-1

please use function arrow

change this class

function LoadData() {

with

const LoadData =()=>{}
rnewed_user
  • 1,386
  • 7
  • 13