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:超过最大更新深度