React中如何修改并响应深层嵌套状态的变化？

你当前用useState管理嵌套的图状态时，更新节点/边的操作确实繁琐，层级越深越麻烦。这里提供两种实用方案，既简化状态更新，又能确保每次变化时自动调用drawGraph重新绘图。

一、自动监听状态变化调用绘图函数 #

不管用哪种更新方式，都可以通过useEffect监听状态变化，触发绘图逻辑：

1. 监听完整graph状态 #

如果保持原有的单一graph状态：

useEffect(() => {
  drawGraph(graph);
}, [graph]);

只要graph的引用发生变化（不管是节点还是边更新），这个副作用就会执行，自动重新绘图。

2. 拆分状态后监听 #

如果把节点和边拆成独立状态，就同时监听两个状态：

useEffect(() => {
  drawGraph({ nodes, edges });
}, [nodes, edges]);

二、简化嵌套状态更新的两种方法 #

方法1：用Immer库简化不可变更新 #

Immer允许你用“直接修改”的语法编写不可变更新，底层自动生成新的状态对象，不用手动写大量扩展运算符和数组方法。

安装Immer

npm install immer
# 或
yarn add immer

各类更新示例

• 添加新节点

import { produce } from 'immer';

setGraph(produce(draft => {
  draft.nodes.push(newNode); // 直接修改draft，Immer自动处理不可变逻辑
}));

• 修改已有节点

// 修改id为2的节点名称
setGraph(produce(draft => {
  const targetNode = draft.nodes.find(node => node.id === 2);
  if (targetNode) {
    targetNode.name = "new-def"; // 直接修改属性
  }
}));

• 添加新边

setGraph(produce(draft => {
  draft.edges.push([3, 1]); // 直接push新边
}));

• 删除边

// 删除[2,3]这条边
setGraph(produce(draft => {
  draft.edges = draft.edges.filter(edge => !(edge[0] === 2 && edge[1] === 3));
}));

方法2：拆分状态，避免嵌套 #

把nodes和edges拆成两个独立的useState，更新逻辑会更直观，无需处理深层嵌套：

初始化拆分状态

const [nodes, setNodes] = useState([
  { id: 1, name: "abc" },
  { id: 2, name: "def" },
  { id: 3, name: "ghi" }
]);
const [edges, setEdges] = useState([[1,2], [2,3]]);

各类更新示例

• 添加新节点

setNodes(prevNodes => [...prevNodes, { id: 4, name: "jkl" }]);

• 修改已有节点

setNodes(prevNodes => 
  prevNodes.map(node => 
    node.id === 2 ? { ...node, name: "new-def" } : node
  )
);

• 添加新边

setEdges(prevEdges => [...prevEdges, [3, 1]]);

• 删除边

setEdges(prevEdges => 
  prevEdges.filter(edge => !(edge[0] === 2 && edge[1] === 3))
);

方案选择 #

• 如果需要保持graph状态的结构统一性（比如要整体传递给其他组件），选Immer更合适；
• 如果图的节点和边逻辑相对独立，拆分状态更轻量，不需要额外依赖库。

内容的提问来源于stack exchange，提问作者Samuele B.