时间戳

首页 > 解决方案 > 无效的钩子调用reactjs

javascript - 无效的钩子调用reactjs

问题描述

每次我尝试渲染页面时，都会引发此错误。我尝试了多种解决方案，但都没有奏效。

当前反应版本是17.0.2，节点版本是14.16.1

这里是重要的代码片段：

import { useAuthUser, useFeatureFlags, useUser, useClaim, firebase } from './lib'
import React from 'react'

...

function App () {
  console.log(React.version)
  const [flags, flagsLoading] = useFeatureFlags() // last executed line here

...

import useCollection from './useCollection'

const useFeatureFlags = () => {
  const [flagData, , loading, error] = useCollection('featureFlags') // last executed line here
  ...
}

export default useFeatureFlags

import { useState, useEffect } from 'react'
import { db } from '../firebase'

const useCollection = (path) => {
  const [loading, setLoading] = useState(true) // here, the error is thrown
  ...
}

export default useCollection

我不是这个项目的作者，但我必须让这个网络应用程序运行。谢谢你的帮助！

编辑：这是堆栈跟踪和错误

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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
resolveDispatcher
node_modules/react/cjs/react.development.js:1476
useState
node_modules/react/cjs/react.development.js:1507
useCollection
project/lib/build/hooks/useCollection.js:18

  15 |  * @returns [collectionDocuments, querySnapshot, loading, error]
  16 |  */
  17 | const useCollection = path => {
> 18 |   const [loading, setLoading] = (0, _react.useState)(true);
  19 |   const [ref, setRef] = (0, _react.useState)(null);
  20 |   const [querySnapshot, setQuerySnapshot] = (0, _react.useState)(null);
  21 |   const [collectionDocuments, setCollectionDocuments] = (0, _react.useState)([]);

useFeatureFlags
project/lib/build/hooks/useFeatureFlags.js:20

  17 |  * randomly determined rollout percentage.
  18 |  */
  19 | const useFeatureFlags = () => {
> 20 |   const [flagData,, loading, error] = (0, _useCollection.default)('featureFlags'); // const test = <useCollection path='featureFlags' />
  21 |   // console.log(test)
  22 | 
  23 |   const output = {};

App
src/App.js:43

  40 | 
  41 | function App () {
  42 |   console.log(React.version)
> 43 |   const [flags, flagsLoading] = useFeatureFlags()
  44 |   const [authUser, authUserLoading] = useAuthUser()
  45 |   const [user, userLoading] = useUser()
  46 |   const [claim, claimLoading] = useClaim()

./src/index.js/<
src/index.js:23

  20 | 
  21 | console.log('project id', process.env.REACT_APP_FIREBASE_PROJECT_ID)
  22 | 
> 23 | ReactDOM.render(<App />, document.getElementById('root'))
  24 | 

./src/index.js
http://localhost:3000/static/js/main.chunk.js:24779:30
__webpack_require__
project/web/webpack/bootstrap:851

  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }

fn
project/web/webpack/bootstrap:150

  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {

1
http://localhost:3000/static/js/main.chunk.js:35286:18
__webpack_require__
project/web/webpack/bootstrap:851

  848 | 
  849 | __webpack_require__.$Refresh$.init();
  850 | try {
> 851 |     modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  852 | } finally {
  853 |     __webpack_require__.$Refresh$.cleanup(moduleId);
  854 | }

checkDeferredModules
project/web/webpack/bootstrap:45

  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 

webpackJsonpCallback
project/web/webpack/bootstrap:32

  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;

(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:81

标签： javascriptreactjsreact-hooksruntime-error

解决方案

在您的第二个和第三个代码段中，添加 import React from "react"

推荐阅读