react库中的react-hooks给出无效的钩子调用错误

IT技术 reactjs react-router-dom react-hooks
2021-03-28 18:53:04

我使用https://www.npmjs.com/package/create-react-library创建了一个 React库,并在其他 React 项目中成功使用了它。但是当我尝试在库中使用 react hooks 功能时,它给了我以下错误。

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
.....

我的库 我只是尝试在我的组件中使用 useState 如下。

import React, { useState } from 'react'

const General = (props) => {

    const [count, setCount] = useState(0);
    return (
        <div>
           General component
        </div>
    )
}

export default General

我正在使用 "react": "^16.8.6""react-dom": "^16.8.6"

我的 React APP 使用https://github.com/facebook/create-react-app创建了一个应用程序,并使用了上面的库,如下所示。

import Reactfrom 'react'
import { General } from 'my.lib'
const accountSummary = props => {

  return (
    <div>
      <General>
    </div>
  )
}

export default accountSummary

两者都具有相同的react版本,并且库使用了相同的react dom 和react版本 peerDependencies

6个回答

正如@Janith 所做的那样,我在我的应用程序中包含了我的组件库(就此而言,任何库)my-comp-lib:"file:../.."(我不想在每次测试时都发布)并且我遇到了同样的问题。

无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的:

  1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
  2. 你可能会违反 Hooks 规则
  3. 您可能在同一个应用程序中拥有多个 React 副本,请参阅 react-invalid-hook-call 以获取有关如何调试和

解决这个问题

我能够通过让我的应用程序和库指向相同的react(包)位置来解决这个问题。

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.

有用!!

请参阅以下链接了解更多详情..

https://github.com/facebook/react/issues/14721

https://github.com/facebook/react/pull/14690

https://github.com/facebook/react/issues/13991

注意:如果您将包发布到 artifactory 并安装,则不会发生此问题,因为您将 react 和 react-dom 作为对等依赖项,并且它们不会包含在发行版中。因此,您的包和应用程序使用安装在应用程序中的相同react。

@yugandhar-pathi 非常感谢这个解决方案!
2021-05-23 18:53:04
顺便说一句,更简洁的解决方案是从库文件夹中运行此命令:“npm link ../web-application/node_modules/react”。这是假设库和 Web 应用程序位于同级文件夹中。如果库也需要使用 react-dom,可以使用类似的命令。
2021-06-03 18:53:04
感谢您的解决方案@yugandhar-pathi!但是有一个问题:我们没有将我们的包发布到 npm 中!我们将它放在我们的 gitlab 服务器上,然后使用 gitlab deploy 令牌将其安装在其他应用程序上。我们如何在生产中处理这个问题?我们不能npm link在生产中使用
2021-06-08 18:53:04
感谢您的回答。它真的有帮助
2021-06-09 18:53:04
库中需要安装react-dom吗?它没有明确导入到 OP 编写的库代码中。
2021-06-11 18:53:04

我遇到了同样的问题,使用 rush monorepo,配置 ui-package 并使用 nextjs 构建应用程序。

解决方案是添加以下代码 package.json

"resolutions": {
  "react": "17.0.1", // verificate your react version
  "react-dom": "17.0.1"
}

在图书馆的package.json

"peerDependencies": {
   "react": "17.0.1",
   "react-dom": "17.0.1"
 },

在此处查看更多信息:https : //github.com/vercel/next.js/issues/9022#issuecomment-728688452

欢迎提供指向解决方案的链接,但请确保您的答案在没有它的情况下也有用:在链接周围添加上下文,以便您的其他用户了解它是什么以及它为什么在那里,然后引用您页面中最相关的部分“重新链接,以防目标页面不可用。仅是链接的答案可能会被删除。
2021-05-22 18:53:04
很好的解决方案。
2021-05-24 18:53:04
谢谢。那帮助很大!
2021-06-11 18:53:04
这解决了我的问题。我使用 npm link 在本地测试一个包,这意味着我有重复的 React 版本。
2021-06-17 18:53:04

我刚刚遇到了同样的问题。我能够通过在我的示例应用程序中指向与我的库中相同的react来修复它:

应用程序结构

  • 例子
    • 包.json
  • src(库)
  • 包.json

因此,从示例 > package.json 我将 react 改为:

    "react": "link:../node_modules/react",

这很像npm link上面列出的,但是每次安装 npm 时它都不会消失。

是的,这是我摆脱上述问题的解决方案。
2021-05-26 18:53:04
请注意,较新版本的 npm 已弃用链接。相反,您需要使用文件:"react": "file:../node_modules/react"
2021-06-20 18:53:04

添加到您的组件库 package.json

"peerDependencies": {
  "react": "<your version>"
}

这样您的 lib 包将使用与react您的主应用程序相同的包。 https://nodejs.org/es/blog/npm/peer-dependencies/