Invariant Violation Invalid hook call / cross-origin error答案

【问题标题】：Invariant Violation Invalid hook call / cross-origin errorInvariant Violation Invalid hook call / cross-origin error
【发布时间】：2021-06-04 08:32:08
【问题描述】：

所以在使这个函数工作之后，我开始创建一个循环，它会在 SSR 之后从后端给我反馈，我想使用钩子，所以我把它做成一个函数组件并开始编写，但是钩子（即使没有它）抛出2个错误。无效的 Hook Call 并引发了跨源错误。

我尝试将文件名更改为 jsx，将文件移出我拥有的文件夹，因为那里有第二个节点模块（我认为它使用了两个版本的 React），我还阅读了某处只是为了清除本地存储，它只是一个使用本地主机问题的开发中。

*编辑所以我发现它甚至没有调用 fn：reactToPdfUtils.savePDFNOW(sourceElement, true, undefined, cb) 它停在这里

//reactToPdf.js

import React, {useEffect} from 'react';
import { savePDF } from '@progress/kendo-react-pdf';
import { drawDOM, exportPDF } from '@progress/kendo-drawing';
var ClassInstancesStore = require('../libs/goggles/reflux/classInstances-store');
var ClassInstancesActions = require('../libs/goggles/reflux/classInstances-actions');



export const savePDFNOW = (sourceElement, willSaveToDB, pageTemplate, cb) => {
    //this hook broke the program as soon as i put it in even with nothing inside
    useEffect(() => {
        //Functionthat gets called after sending the pdf to the backend
        // function onClassInstancesStoreChange(opInfo){
        //     var e = cloneDeep(opInfo);
        //     if (e.op === 'Call::StorePassportPDFToDisk') {
        //         if(e.error){
        //             console.log(e.ret)
        //             setPdf({ pdfErrors: e.ret })
        //         } else {
        //             console.log(e.ret)
        //             setPdf({ inProgress: true })
        //             alert('Successfully created: ' + e.ret.fileName)
        //             // onSubmit()
        //         }
        //     }
        // };
        // let listeners = [];
        // listeners.push(ClassInstancesStore.listen(onClassInstancesStoreChange));
    
        // return function cleanup() {
        //     _.each(listeners, function(listener) {listener();}); //NOTE: destroy listeners
        // }
    
    }, [])

    try {
      //do all the my functions that make my pdf perfect
    } catch (error) {
        //snap something went wrong all my awesome error handling
    }
};






//previewer.jsx
var React = require('react');
var _ = require('underscore');
var reactToPdfUtils = require('../../../../../components/reactToPdf.js');


    handleSave = (sourceElement) => {
        reactToPdfUtils.savePDFNOW(sourceElement, true, undefined, cb)
        function cb(sendDataContent){
            if(sendDataContent.err){
                console.log(sendDataContent.message)
            } else {
                console.log('sucess')
            }
        }
    };

【问题讨论】：

标签： javascript reactjs react-hooks jsx

【解决方案1】：

我对代码的理解是函数handleSave会调用外部钩子savePDFNOW。如果发生这种情况，那么无论 useEffect 逻辑如何，它都会中断。

原因是在组件外部提取的钩子要求其名称以use开头

所以要让钩子运行，请将其名称更改为useSavePDFNOW。

话虽如此，我认为这不是 useEffect 的有效用例，请将 useEffect 视为 componentDidMount/Update。这与组件渲染周期而不是事件侦听器有关。取消 useEffect 并将其保留为常规功能更有意义。

还有一些事情，如果您使用的是最新的 react 版本，则不需要导入 react。另外建议使用 const/let 代替 var。

【讨论】：