Invalid Hook Call Warning 链接 react-app 和本地 npm 包

Question

我想调试我通过使用npm link.

cd <my-npm-package>
npm link 
cd <my-react-app>
npm link my-npm-package

它工作正常，但如果我不使用任何使用反应钩子的东西。但是一旦我useState()在 my-npm-package 项目中使用类似的东西，它就会出现一些错误并且我的应用程序无法运行。

我做了很多研究，但唯一对我有用的解决方案是使用

cd <my-npm-package>
npm npm pack
cd <my-react-app>
npm install ../my-npm-package/my-npm-package-1.0.0.tgz

我知道问题是因为多个版本的反应相互干扰。但我不知道如何解决它。

它是一个已知问题，更多信息描述为租用https://github.com/facebook/react/issues/13991

但我对这个 npm 的东西很陌生，不太了解解决方案。

包的 package.json

{
  "name": "my-npm-package",
  "version": "1.0.1",
  "description": "Test npm package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "socram",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0"
  },
  "peerDependencies": {
    "react": "^16.9.0"
  },
  "dependencies": {}
}

index.js 中使用的代码

import React, {useState} from "react"

export function test() {
    const [item, setItem] = useState("TEST")
    console.log(item);
    return setItem;
}

用于测试的反应应用程序是一个新创建的反应项目，使用 npx create-react-app my-app

解决这个问题的最佳方法是什么？我不想跑npm pack，然后npm install xxx...每次我改变一些东西。

这是一个更好的解决方案，然后每次都将其发布到 npm。但必须有更好的解决方案。

结果使用 npm link

结果使用 npm pack

Answer 1

我在使用useEffect和useState创建 NPM 包时遇到了完全相同的问题。

我按照此处找到的关于此问题的 React 文档中的说明逐步操作

这部分文档给了我解决方案：

当您使用 npm link 或等效物时，也会出现此问题。在这种情况下，你的打包器可能会“看到”两个 Reacts——一个在应用程序文件夹中，一个在你的库文件夹中。假设 myapp 和 mylib 是同级文件夹，一种可能的解决方法是从 mylib运行npm link ../myapp/node_modules/react。这应该使库使用应用程序的 React 副本。

链接到项目所在的目录后，就可以npm link在包目录和npm link <your-app>目录项目中使用。

要更新，请npm run build在您的包目录中使用，它应该立即更新。

Answer 2

hooks 的规则 lint 规则使用命名约定来判断代码是组件、钩子还是其他东西。以大写字母开头的函数被假定为组件。以 开头的函数use被认为是钩子。其他一切都假设两者都不是。

由于您命名了 function test，因此它假定它既不是组件也不是钩子，因此不允许您在其中使用钩子。Test如果它是组件，则将名称更改为useTest自定义挂钩。