React组件导入PDF生成函数在onSubmit调用时报Invalid hook call如何解决

你遇到的报错本质是两个核心问题：

1. React Hook 只能在函数组件或自定义Hook的顶层作用域调用，你将useFormData写在了普通工具函数generatePdf中，不属于React组件调用链路，因此触发非法Hook调用报错。
2. 之前尝试双参数传参时出现data undefined，大概率是你在组件内获取Context返回值时结构匹配错误，或者传参顺序/参数名写错。

步骤1：修改抽离的PDF生成工具函数 #

把工具函数改为纯逻辑函数，所有依赖的外部数据都通过入参传入，不要在内部调用任何React Hook：

// 单独的pdf生成文件 比如/utils/generatePdf.js
import { jsPDF } from "jspdf";

// 入参改为两个：表单数据、从Context拿到的全局数据
export default function generatePdf (formData, contextData) {
    const chosenContract = Object.values(contextData.contract);
    const doc = new jsPDF();
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 20, 'Hallo! Folgender Vertrag wurde gerade online abgeschlossen: ');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(chosenContract[1] + ',', 10, 35);
    doc.text(chosenContract[2] + ' ' + '€/monatlich' + ',', 10, 40);
    doc.text(chosenContract[4], 10, 45);
    doc.setFontSize(14)
    doc.setFont('undefined', 'bold'),
    doc.text(10, 60, 'Der Nutzer hat folgende Daten hinterlassen:');
    doc.setFontSize(10);
    doc.setFont('undefined', 'normal'),
    doc.text(JSON.stringify(formData), 10, 70);
    window.open(URL.createObjectURL(doc.output("blob")))
    console.log(formData);
}

步骤2：修改Form组件调用逻辑 #

在组件内先拿到Context数据，调用生成函数时把两个参数都传入即可：

import generatePdf from '你的generatePdf文件路径';
import { useFormData } from "../context";

export const Form = () => {
  // 组件内正常调用Hook拿到Context数据
  const { data } = useFormData();

  const onSubmit = (formData) => {
    // 传入两个参数调用PDF生成逻辑
    generatePdf(formData, data);
  };
}

排查之前传参报错的常见原因 #

如果还是出现data undefined，检查两个点：

• useFormData返回的结构是否匹配，比如有没有写错解构的字段名，是不是应该直接const data = useFormData()而不是解构
• 你的Form组件外层有没有包裹对应Context的Provider，确保Context能正常返回数据

内容的提问来源于stack exchange，提问作者Katharina Schreiber