反应库中的反应钩子给出无效的钩子调用错误 [英] React hooks in react library giving Invalid hook call error

问题描述

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

无效的钩子调用.钩子只能在函数组件的主体内部调用.这可能是由于以下原因之一造成的:1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM)2. 你可能违反了 Hooks 规则3. 你可能在同一个应用中拥有多个 React 副本.....

我的图书馆我只是尝试在我的组件中按如下方式使用 useState.

import React, { useState } from 'react'const General = (props) =>{const [count, setCount] = useState(0);返回 (<div>通用组件

)}导出默认通用

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

我的 React APP使用 https://github.com/facebook/create-react-app 创建了一个应用程序并按如下方式使用上述库.

import Reactfrom 'react'从'my.lib'导入{一般}const accountSummary = props =>{返回 (<div><一般>

)}export default account总结

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

解决方案

我在我的应用程序中包含了我的组件库(对于任何库)，就像 @Janith 使用 my-comp-lib:"file:../.."(我不想每次都想测试就发布)，我遇到了同样的问题.

<块引用>

无效的钩子调用.Hooks 只能在 a 的 body 内部调用功能组件.这可能发生在以下情况之一原因:

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

解决这个问题

我可以通过让我的应用和库指向同一个 react(包)位置来解决这个问题.

以下是我遵循的步骤:1. 在您的应用程序中:a) cd node_modules/react &&npm 链接b) cd node_modules/react-dom &&npm 链接2. 在你的图书馆a) npm 链接反应b) npm link react-dom3) 停止你的开发服务器并再次执行 `npm start`.

它有效！！

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

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

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

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

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

I create a react library using https://www.npmjs.com/package/create-react-library And successfully used it on other React project. But when I tried to use react hooks functionalities inside library it gives me following error.

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
.....

My Library I just tried to use useState as follows in my component.

import React, { useState } from 'react'

const General = (props) => {

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

export default General

I am using "react": "^16.8.6" and "react-dom": "^16.8.6"

My React APP Created a application using https://github.com/facebook/create-react-app and used above library as follows.

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

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

export default accountSummary

Both has same react versions and library has used same react-dom and react versions as peerDependencies

解决方案

I was including my component library (for that matter any library) in my application as @Janith did using my-comp-lib:"file:../.." (I don't want to publish every time I want to test) and I encountered the same issue.

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 See react-invalid-hook-call for tips about how to debug and

fix this problem

I was able to fix this by making my app and library point to the same react (package) location.

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.

It works!!

Please refer below links for more details ..

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

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

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

Note : This issue will not happen if you publish your package to artifactory and install because you will have react & react-dom as peer-dependencies and they won't get included in the distribution. So your package and application use the same react which is installed in the application.

这篇关于反应库中的反应钩子给出无效的钩子调用错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！