反应-无效的挂钩调用。挂钩只能在功能组件的主体内部调用

时间:2019-09-15 04:47:50

标签: javascript node.js reactjs webpack react-redux

我创建了一个react模块,然后使用create-react-app创建了一个react应用 当我运行该应用程序时,在浏览器中出现以下错误:

无效的挂钩调用。挂钩只能在函数组件的主体内部调用。

使用chrome开发工具检查我的应用程序时,我注意到了问题的证据:webpack / babel在浏览器中加载了模块的node_modules,因此有2个版本的react(和任何peerDependencies):

enter image description here

是否可以告诉我的应用排除任何模块的node_modules文件夹?

感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

我按照here中提到的方法使用react-app-rewired和custom-cra修复了这个问题。

您可以在此处找到示例项目:https://github.com/dwjohnston/material-ui-hooks-issue/tree/master

我认为这对于遇到相同问题的其他人很有用。

Ciao

答案 1 :(得分:0)

如果有人偶然发现此错误,而标准解决方案均无济于事,那么您的情况可能与我刚刚遇到的情况相同。

我的代码试图从一个未安装的包(在我的例子中为 @material-ui)导入一个钩子。我收到了上述错误,而不是警告我该软件包未安装。

代码示例:

import { makeStyles } from "@material-ui/core/styles"
const useStyles = makeStyles({
   ...
});
function MyComponent() {
   const classes = useStyles();
}