在React-Graph-Vis中更新图图-引发错误

如何解决在React-Graph-Vis中更新图图-引发错误

希望对React有更多经验的人可以帮助我。

我正在尝试更新渲染的图形，以使其重绘指定数量的行。

我的尝试如下（运行create-react-app后，您可以将以下内容粘贴到App.js文件中）：

import React,{ useState } from 'react'
import './App.css'
import Graph from 'react-graph-vis'
import { v4 as uuidv4 } from 'uuid'
import cloneDeep from 'lodash/cloneDeep'

function App() {
  let nodes = [
    { id: 1,label: '1',title: '1' },{ id: 2,label: '2',title: '2' },{ id: 3,label: '3',title: '3' },{ id: 4,label: '4',title: '4' },{ id: 5,label: '5',title: '5' },]

  let edges = [
    { from: 1,to: 2 },{ from: 1,to: 3 },{ from: 2,to: 4 },to: 5 },]

  let default_graph = {
    edges: edges,nodes: nodes,}

  let [graph,setGraph] = useState(default_graph)
  let [user_input,setUserInput] = useState('')

  const options = {
    layout: {
      hierarchical: false,},edges: {
      color: '#000000',height: '500px',}

  const events = {
    select: function (event) {
      let { nodes,edges } = event
    },}

  function handleChange(event) {
    setUserInput(event.target.value)
  }

  function handleClick(event) {
    let raw_input = user_input

    console.log(raw_input)

    if (raw_input === '') {
      return
    }

    let input = raw_input.split('\n')
    // this tells how us how many nodes to create
    let n = parseInt(input[0])

    let new_graph = {}
    let new_nodes = []
    let new_edges = []

    // create nodes - issue appears to be here
    for (let i = 1; i <= n; i++) {
      let node = {
        id: i,label: `${i}`,// title: `${i}`,}
      new_nodes.push(node)
    }

    new_graph['nodes'] = new_nodes

    setGraph(new_graph)
  }

  return (
    <div>
      <nav>
        <a href=""> back to Homepage</a>
      </nav>
      <div className="button-container">
        <button onClick={handleClick}>Draw Graph</button>
      </div>
      <div className="App">
        <textarea
          id="user-input"
          className="inputs"
          onChange={handleChange}
        ></textarea>
        <div className="graph-container">
          <Graph
            key={uuidv4}
            graph={graph}
            options={options}
            events={events}
            getNetwork={(network) => {}}
          />
        </div>
      </div>
    </div>
  )
}

export default App

让我们说我在数字框中键入6（或任何大于或等于5的数字）。问题是运行时会引发错误：

有人可以在这里帮助我吗？我正在学习React，并认为我的代码是正确的，但是我必须缺少一些东西。