Reactjs react graph vis-Grapg即使在状态发生更改时也不会重新渲染

当我尝试更新悬停事件的状态时，实际状态值正在更改，但图形没有重新渲染

在控制台中，我可以看到节点标签更改为sample。但这张图表并没有重新招标

这是我的基于react函数的组件

import React, { useEffect, useState } from 'react';
import Graph from 'react-graph-vis';

import './vis-network.css';

function RelationGraph1() {
  const [graph, setGraph] = useState({
    nodes: [
      {
        id: 1,
        label: 'Node 1',
        title: '',
      },
      { id: 2, label: 'Node 2', title: '' },
      { id: 3, label: 'Node 3', title: '' },
      { id: 4, label: 'Node 4', title: '' },
      { id: 5, label: 'Node 5', title: '' },
    ],
    edges: [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 2, to: 4 },
      { from: 2, to: 5 },
    ],
  });

  const options = {
    layout: {
      hierarchical: false,
    },
    edges: {
      color: '#1D1D1D',
    },
    interaction: {
      hover: true,
      navigationButtons: true,
      tooltipDelay: 0,
    },
    nodes: {
      borderWidth: 0,
      borderWidthSelected: 0,
      color: '#0262C4',
      shape: 'circle',
      size: 1,
      shadow: {
        enabled: true,
        color: 'rgba(0,0,0,0.5)',
        size: 10,
        x: 5,
        y: 5,
      },
      font: {
        color: '#fff',
        size: 13,
        bold: {
          mod: 'bold',
        },
      },
    },
  };

  const events = {
    select: function (event) {
      var { nodes, edges } = event;
      console.log('Selected nodes:');
      console.log(nodes);
      console.log('Selected edges:');
      console.log(edges);
    },
    showPopup: (id) => { // node id
      const data = graph.nodes.map((el) => {
        if (el.id === id) {
          el.label = `sample node name`;
        }
        return el;
      });
      setGraph({ ...graph, nodes: data });
    },
  };

  return (
    <Graph
      graph={graph}
      options={options}
      events={events}
      style={{ height: '450px' }}
    />
  );
}

export default RelationGraph1;

import React，{useffect，useState}来自“React”；
从“react Graph vis”导入图形；
导入“/vis network.css”；
函数关系图1（）{
const[graph，setGraph]=useState({
节点：[
{
id:1，
标签：“节点1”，
标题：“”，
},
{id:2，标签：'Node 2'，标题：'}，
{id:3，标签：'Node 3'，标题：'}，
{id:4，标签：'Node 4'，标题：'}，
{id:5，标签：'Node 5'，标题：'}，
],
边缘：[
{从：1到：2}，
{从：1到：3}，
{从：2到：4}，
{从：2到：5}，
],
});
常量选项={
布局：{
等级：错，
},
边缘：{
颜色：“#1d”，
},
互动：{
哈弗：没错，
导航按钮：正确，
tooltipDelay:0，
},
节点：{
边框宽度：0，
所选边界宽度：0，
颜色：'#0262C4'，
形状：“圆”，
尺寸：1，
影子：{
启用：对，
颜色：“rgba（0,0,0,0.5）”，
尺寸：10，
x:5，
y:5，
},
字体：{
颜色：“#fff”，
尺码：13，
粗体：{
mod:'粗体'，
},
},
},
};
常量事件={
选择：功能（事件）{
var{nodes，edges}=事件；
log（'所选节点：'）；
console.log（节点）；
log（'selectedges:'）；
控制台。原木（边缘）；
},
showPopup：（id）=>{//节点id
const data=graph.nodes.map（（el）=>{
如果（el.id==id）{
el.label=`sample node name`；
}
返回el；
});
集合图（{…图，节点：数据}）；
},
};
返回(
);
}
导出默认关系图1；

---

非常感谢你的帮助。谢谢

我能够在hoverNode事件中更新标签，如下所示：

    hoverNode: (e) => {
      const data = graph.nodes.map((el) => {
        if (el.id === e.node) return { ...el, label: "sample node name" };
        else return el;
      });

      const temp = { ...graph };
      temp.nodes = data;
      setGraph(temp);
    },

样本：