React 组件模块（从本地 repo 导入）导致错误“只能在函数组件的主体内部调用 Hooks。”

Posted 2023-02-19

【中文标题】React 组件模块（从本地 repo 导入）导致错误“只能在函数组件的主体内部调用 Hooks。”

【英文标题】：React component module (imported from local repo) causes error "Hooks can only be called inside of the body of a function component."

【发布时间】：2022-01-13 16:31:09

【问题描述】：

我创建了一个 react 组件模块并将该模块导入到 webpack 项目中。

我目前正在从本地存储库中导入组件：

npm install ~/git/repo-name

我这样做是因为将模块重新上传到 npm 来测试每一个微小的变化是不可行的。

组件模块将 react 和 react-dom 列为 package.json 中的对等依赖项，您可以在此处查看：

  ...(name, version,etc)...

  "devDependencies": 
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0"
  ,
  "dependencies": 
    "core-js": "^3.19.2",
    "regenerator-runtime": "^0.13.9"
  ,
  "peerDependencies": 
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  

我找到了this *** question，列出的第一个答案听起来像是罚单。但是，在 npm 将 node_modules 中的 组件的 react 和 react-dom 文件夹链接到 webpack 项目的 node_modules 目录中的相同文件夹后，我仍然收到错误。

当我编译组件模块时，我能够将错误追溯到 babel 发出的修改代码中的特定行：

  var availableNetworkOptions = (0, _react.useRef)(null);

我不理解这种语法，但我可以推断它是 babel 如何在我的原始 .js 文件中转换我对“useRef”的使用的一部分（或者至少它是如何尝试这样做的）。我不禁想知道这种奇怪的语法是否与错误有关。这似乎不太可能 - 我确信 babel 知道它在做什么。另一方面，我似乎已经排除了似乎是导致此问题的更常见原因之一的“重复反应”问题，或者至少据我所知，我已经这样做了。

【参考方案1】：

您不能在组件之外使用钩子、重构它并将其转换为函数或在函数或类基组件中使用它们

【讨论】：

感谢您的帮助，但我认为您在没有实际阅读我的邮件正文的情况下回复了我的问题主题中的错误消息。我肯定在我的代码中使用函数组件内部的 useRef 挂钩。如果一个钩子最终在组件之外使用，它在我构建模块时在 babel 输出的转译代码中。

【参考方案2】：

事实上，由于本地组件模块和使用它的项目都安装了 react，因此问题是多个 react 副本。 solution I linked to（见第一个答案）不起作用，因为我没有正确遵循指示。

这些方向是：

Below are the steps I followed :
1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

3)Stop your dev-server and do `npm start` again.

相反，对于第 2 步，我正在做：

(in library)
cd node_modules/react && npm link react
cd ../react-dom && npm link react-dom