Invariant Violation Invalid hook call / cross-origin error

Posted

技术标签:

【中文标题】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。

【讨论】:

以上是关于Invariant Violation Invalid hook call / cross-origin error的主要内容,如果未能解决你的问题,请参考以下文章

GatsbyJS Invariant Violation:在尝试推断 GraphQL 类型时遇到错误

Gatsby - WebpackError: Invariant Violation error with apolloClient

自定义 React Native UI 组件:Invariant Violation

React-Native = Invariant Violation:超过最大更新深度

Uncaught Invariant Violation:渲染的钩子比上一次渲染时更多

React-Native Invariant Violation:元素类型无效