React - 无效的钩子调用。 Hooks 只能在函数组件的主体内部调用答案

【问题标题】：React - Invalid hook call. Hooks can only be called inside of the body of a function componentReact - 无效的钩子调用。 Hooks 只能在函数组件的主体内部调用
【发布时间】：2019-09-15 04:47:50
【问题描述】：

我创建了一个反应模块，然后使用 create-react-app 创建了一个反应应用程序当我运行应用程序时，我在浏览器中收到以下错误：

无效的钩子调用。 Hooks 只能在函数组件内部调用。

使用 chrome 开发工具检查我的应用程序，我注意到了问题的证据：webpack/babel 在浏览器中加载了我的模块的 node_modules，因此有 2 个版本的 react（以及任何 peerDependencies）：

有没有办法告诉我的应用排除任何模块的 node_modules 文件夹？

感谢您的帮助。

【问题讨论】：

你有没有在创建项目后手动做npm install？
多次。

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

【解决方案1】：

我按照here 提到的方法使用 react-app-rewired 和 customize-cra 解决了这个问题。

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

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

调

【讨论】：

【解决方案2】：

如果有人偶然发现此错误并且没有任何标准解决方案可以提供帮助，那么您可能会遇到与我刚刚遇到的情况相同的情况。

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

代码示例：

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

【讨论】：

【解决方案3】：

通过编辑 index.html 修复它。刚刚在页面头部移动了带有捆绑包的标签。我不知道这是否是一个好的解决方案，但仍然有效

喜欢这个

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8"/>
            <title>Test</title>
            <script src="bundle.js"></script>
        </head>
        <body>
            <div id="root"></div>
        </body>
    </html>

脚本标签在正文中（移动到头部），因为当我开始创建项目时，我只是从示例中复制了它。

【讨论】：

你可以添加一些示例代码来向提问者展示你的意思
当然，它已经更新了