useEdgesState

GitHub 上的源代码

这个钩子可以轻松地让你原型一个受控流，你可以在其中管理节点和边的状态，而不是在 <code class="nextra-code" dir="ltr">ReactFlowInstance</code> 中。你可以把它想象成 React 的 <code class="nextra-code" dir="ltr">useState</code> 钩子，并带有一个额外的辅助回调函数。

import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
 
const initialNodes = [];
const initialEdges = [];
 
export default function () {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
    />
  );
}

签名

名称	类型
#参数
#`initialEdges`	`Edge<T>[]`
#返回值
#`[0]`	`Edge<T>[]` 当前边的数组。你可以直接将它传递给 <ReactFlow /> 组件的 edges 属性，或者你可能想先对其进行操作，例如执行一些布局。
#`[1]`	`React.Dispatch<React.SetStateAction<Edge<T>[]>>` 你可以用来更新边的函数。你可以传递一个新的边数组，或者传递一个接收当前边数组并返回一个新的边数组的回调函数。这与 React 的 useState 钩子返回的元组的第二个元素相同。
#`[2]`	`(changes: EdgeChange[]) => void` 一个方便的回调函数，可以接受一个 EdgeChanges 数组并相应地更新边的状态。你通常会直接将它传递给 <ReactFlow /> 组件的 onEdgesChange 属性。

Typescript

这个钩子接受一个自定义边类型的泛型类型参数。有关更多信息，请参阅我们 Typescript 指南中的 <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="/learn/advanced-use/typescript#nodetype-edgetype-unions">这一部分</a>。

const nodes = useEdgesState<CustomEdgeType>();

备注

这个钩子是为了让原型更容易，我们的文档示例更清晰而创建的。虽然在生产环境中使用这个钩子是可以的，但在实践中，你可能想使用一个更复杂的 state 管理解决方案，例如 <a class="nextra-focus _text-primary-600 _underline hover:_no-underline _decoration-from-font [text-underline-position:from-font]" href="https://flow.reactjs.ac.cn/docs/guides/state-management/" target="_blank" rel="noreferrer">Zustand</a> 代替。

钩子工具