无效的钩子调用reactjs

Question

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

当前react版本是17.0.2，node版本是14.16.1

这里重要的代码sn-ps：

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

Answer 1

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