无效的钩子调用错误，但一切似乎都很好

Question

大家好，这是我第一次在这里问问题，但我真的没有想法了......

未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用

对于在 React-native web 上运行的 React-native 项目，我想使用useEffect()钩子在我的组件中运行一个 init 函数。为了从我导入的本地库中获取数据yarn link（该库不使用 react）。

正如你所看到的，我的钩子在一个功能组件中：

import React, { useEffect } from 'react';

import Premium from './Premium';

const Widget = () => {

  useEffect(() => {
    init();
  }, []);

  const init = async () => {
    console.log('working');
  };

  return (
    <Premium />
  );
};

export default Widget;

我还检查我的版本的反应，因为它说反应-DOM这里，我只得到了一个副本的反应/反应-DOM和反应母语。

可以肯定的是，我已经按照官方文档中的说明以两种不同的方式进行了检查。（通过npm ls react-native，也通过console.log(window.React1 === window.React2);）

这是我的package.json：

  "scripts": {
    "lint": "./node_modules/.bin/eslint .",
    "test": "./node_modules/.bin/jest"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.10.3"
  },
  "devDependencies": {
    "@babel/core": "7.9.6",
    "@poool/eslint-config": "0.0.1-alpha.3",
    "babel-eslint": "10.1.0",
    "babel-jest": "26.0.1",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "eslint": "6.8.0",
    "eslint-config-standard": "14.1.1",
    "eslint-plugin-babel": "5.3.0",
    "eslint-plugin-import": "2.20.2",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "4.2.1",
    "eslint-plugin-react": "7.20.0",
    "eslint-plugin-standard": "4.0.1",
    "jest": "26.0.1",
    "jest-canvas-mock": "1.1.0",
    "metro-react-native-babel-preset": "0.59.0",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-native": "0.62.2",
    "react-native-web": "0.12.2",
    "react-test-renderer": "16.9.0"
  }
}

谢谢大家！如果我做错了什么，请随时告诉我，这对我来说是第一次:)

Answer 1

我终于自己找到了答案，但我没有提供有关我的问题的足够详细信息。

事实是我有 2 个node_modules：

• 一个用于我的组件（我正在开发一个库）。
• 一个用于通过 react-native for web 运行我的组件的示例应用程序。

为了解决我的问题，我只需关注https://github.com/facebook/react/issues/13991#issuecomment-435587809（我看了 10000 次），以便指向同一个 React 副本。它工作得很好！

感谢您的意见 ！