时间戳

首页 > 解决方案 > React：更新数组道具不会触发 useEffect 钩子

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

问题描述

我在使用 React 钩子时遇到问题。

我有一个表单，我在其中更新一个添加元素的数组。我想在更新这个数组时触发一个函数。这是我所做的：

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;

控制台日志输出更新后的数组：

// 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}

问题是组件中useEffect的Graph没有运行：

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

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

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

我只有在浏览器中加载应用程序时才能看到控制台日志“更新”，之后，无论我添加多少节点或链接，该功能都不会再次触发。

我错过了什么？

标签： javascriptreactjs

解决方案

useState在您的 App 函数中使用以最初存储链接和节点的值

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>
  );
}

推荐阅读