Invariant Violation Invalid hook call / cross-origin error

Posted 2023-02-21

【中文标题】Invariant Violation Invalid hook call / cross-origin error

【英文标题】：

【发布时间】：2021-06-04 08:32:08

【问题描述】：

所以在使这个函数工作之后，我开始创建一个循环，它会在 s-s-r 之后从后端给我反馈，我想使用钩子，所以我把它做成一个函数组件并开始编写，但是钩子（即使没有它）抛出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')
            
        
    ;

【参考方案1】：

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

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

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

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

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