Next.js+TypeScript项目中@xyflow/react钩子函数报错求助

问题原因 #

报错是因为@xyflow/react的版本API变更：

• v10及以上版本中，useNodesState和useEdgesState仅返回两个值[nodes, setNodes]/[edges, setEdges]，不再提供第三个onChange回调函数，节点/边的变更逻辑已整合到setNodes/setEdges中
• 若你安装的是v9版本，虽钩子返回三个值，但可能存在版本安装不完整或导入路径异常的情况

解决方案 #

方案1：适配v10+版本（推荐） #

修改代码以匹配最新API规范：

import { Workflow } from "@prisma/client";
import React from "react";
import { ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";

import "@xyflow/react/dist/style.css";

function FlowEditor({ workflow }: { workflow: Workflow }) {
  // v10+版本仅返回状态和状态更新函数
  const [nodes, setNodes] = useNodesState([]);
  const [edges, setEdges] = useEdgesState([]);

  return (
    <main className="h-full w-full">
      <ReactFlow
        nodes={nodes}
        edges={edges}
        // 直接将setNodes/setEdges传入变更回调
        onNodesChange={setNodes}
        onEdgesChange={setEdges}
      />
    </main>
  );
}

export default FlowEditor;

方案2：回退到v9版本（仅适合有旧版本依赖的场景） #

卸载当前版本并安装v9.x系列：

npm uninstall @xyflow/react
npm install @xyflow/react@9.x

回退后你的原有代码即可正常运行。

同类流程图组件推荐 #

若需要替代方案，可考虑：

• Ant Design Flowchart：适配React生态，API简洁，文档完善，适合中后台项目
• React Diagrams：支持高度自定义节点/边，适合复杂业务场景的流程图需求
• Mermaid React：通过文本语法生成流程图，快速实现可视化需求

内容的提问来源于stack exchange，提问作者Shykat Himu