时间戳

首页 > 解决方案 > 无效的钩子调用错误，但一切似乎都很好

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

问题描述

大家好，这是我第一次在这里提出问题，但我真的没有办法解决这个问题......

未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 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;

我还检查了我的 react 和 react-dom 版本，因为它在这里说，我只有一个 react / react-dom 和 react-native 的副本。

可以肯定的是，正如官方文档中所说，我已经以两种不同的方式检查了这一点。（通过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"
  }
}

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

标签： reactjsreact-nativereact-hooksreact-native-web

解决方案

我终于自己找到了答案，但我没有就我的问题提供足够的细节。

事实是我有 2 node_modules：

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

为了解决我的问题，我只需按照https://github.com/facebook/react/issues/13991#issuecomment-435587809（我看过 10000 次），以便指向同一个 React 副本。而且效果很好！

感谢您的意见 ！

推荐阅读