React：更新数组道具不会触发 useEffect 钩子

Question

I'm having a problem with React hooks.

I have a form where I update an array adding elements. I want to trigger a function when this array is updated. Here's what I did:

import React from 'react';
import './App.css';

import Graph from './Components/Graph/Graph'
import AddNode from './Components/AddNode'
import AddLink from './Components/AddLink'
// import Data from './Assets/data.json'

let nodes = [
    {
      "name": "Peter",
      "label": "Person",
      "id": 1
    },
    {
      "name": "Michael",
      "label": "Person",
      "id": 2
    },
    {
      "name": "Neo4j",
      "label": "Database",
      "id": 3
    },
    {
      "name": "Graph Database",
      "label": "Database",
      "id": 4
    }
]

let links = [{
      "source": 1,
      "target": 2,
      "type": "KNOWS",
      "since": 2010
    },
    {
      "source": 1,
      "target": 3,
      "type": "FOUNDED"
    },
    {
      "source": 2,
      "target": 3,
      "type": "WORKS_ON"
    },
    {
      "source": 3,
      "target": 4,
      "type": "IS_A"
    }
  ]

function App() {
  const addNode = node => {
    console.log(nodes)
    //nodes.push(node)
    nodes = nodes.concat(node)
    console.log(nodes)
  }

  const addLink = link => {
    console.log(links)
    //links.push(link)
    links = links.concat(link)
    console.log(links)
  }

  return (
    <div className="App">
      <Graph
        nodes={nodes}
        links={links}
      />
      <AddNode
        addNode={addNode}
      />
      <AddLink
        addLink={addLink}
      />
    </div>
  );
}

export default App;

The console logs outputs the updated array:

// before:
(4) [{…}, {…}, {…}, {…}]
0: {name: "Peter", label: "Person", id: 1, index: 0, x: 531.8419721919323, …}
1: {name: "Michael", label: "Person", id: 2, index: 1, x: 449.0976491010945, …}
2: {name: "Neo4j", label: "Database", id: 3, index: 2, x: 440.08459218524604, …}
3: {name: "Graph Database", label: "Database", id: 4, index: 3, x: 498.9750895616001, …}
length: 4
__proto__: Array(0)
// after:
(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "Peter", label: "Person", id: 1, index: 0, x: 531.8419721919323, …}
1: {name: "Michael", label: "Person", id: 2, index: 1, x: 449.0976491010945, …}
2: {name: "Neo4j", label: "Database", id: 3, index: 2, x: 440.08459218524604, …}
3: {name: "Graph Database", label: "Database", id: 4, index: 3, x: 498.9750895616001, …}
4: {name: "test", label: "a", id: 10}

The problem is that the useEffect in the Graph component doesn't run:

function Graph(props) {
  const {nodes, links} = props
  ...

  const update = (svg, colors, simulation) => {
    ....
    console.log('updating')
  }

  React.useEffect(() => {
    update()
  }, [nodes, links])

I can see the console log "updating" only when I load the app in the browser, after that, no matter how many nodes or links I add, that function is not triggered again.

What am I missing?

Answer 1

Use useState in your App function to initially store the values of links and nodes

function App() {
  const [linksState, setLinksState] = useState(links)
  const [nodesState, setNodesState] = useState(nodes)
  const addNode = node => {
    newNodes = [...nodesState]
    newNodes = newNodes.concat(node)
    setNodesState(newNodes)
  }

  const addLink = link => {
    newLinks = [...linksState]
    newLinks = newLinks.concat(link)
    setLinksState(newLinks)
  }

  return (
    <div className="App">
      <Graph
        nodes={nodesState}
        links={linksState}
      />
      <AddNode
        addNode={addNode}
      />
      <AddLink
        addLink={addLink}
      />
    </div>
  );
}