applyNodeChanges()

在 <ReactFlow /> 组件上的各种事件可以产生一个 NodeChange，它描述了如何以某种方式更新你的流程节点。如果你不需要任何自定义行为，可以使用这个工具将这些更改的数组应用到你的节点上。

🌐 Various events on the <ReactFlow /> component can produce a NodeChange that describes how to update the nodes of your flow in some way. If you don’t need any custom behavior, this util can be used to take an array of these changes and apply them to your nodes.


import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges } from '@xyflow/react';
 
export default function Flow() {
  const [nodes, setNodes] = useState([]);
  const [edges, setEdges] = useState([]);
  const onNodesChange = useCallback(
    (changes) => {
      setNodes((oldNodes) => applyNodeChanges(changes, oldNodes));
    },
    [setNodes],
  );
 
  return (
    <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} />
  );
}

签名

🌐 Signature

Parameters:

Name	Type	Default
`changes`	`NodeChange<NodeType>[]` Array of changes to apply.
`nodes`	`NodeType[]` Array of nodes to apply the changes to.

Returns:

NodeType[]

Array of updated nodes.

注释

🌐 Notes

如果你不需要任何自定义行为，useNodesState 钩子会方便地为你封装这个工具和 React 的 useState 钩子，使用起来可能更简单。