即使我不使用钩子，也可以用 Provider 反应无效的钩子调用

Question

过去几个月我一直在做一个项目，没有问题，但是今天我尝试启动我的开发服务器时突然出现以下错误。

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

我做了一些挖掘，认为问题出在我的 Provider 上，但我不知道为什么，因为我没有使用钩子。我已经检查过我只运行 1 个反应应用程序

App.js

import {BrowserRouter, Route, Switch} from 'react-router-dom'
import {ProtectedRoute} from './components/utils/protected-routes'
import { PersistGate } from 'redux-persist/integration/react'
import LandingPage from './components/landingPage'
import Index from './components/recipe/main/index'
import Register from './components/register/register'
import ViewRecipe from './components/recipe/view-recipe/index'
import CreateRecipe from './components/recipe/create-recipe/index'
import ResetPassword from './components/account/reset-password/index'
import Discover from './components/recipe/discover/index'

import {Provider} from 'react-redux'; //Wraps everything insider provider
import {store, persistor} from './store';


function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
            <div className="App">
              <Switch>
                <Route exact path ="/" component={LandingPage} />
                <ProtectedRoute path ="/Home" component={Index} />
                <Route path ="/Register" component={Register} />
                <Route path ="/ViewRecipe/:recipeId" component={ViewRecipe} />
                <Route path ="/CreateRecipe" component={CreateRecipe} />
                <Route path ="/EditRecipe" component={CreateRecipe} />
                <Route path ="/ResetPassword" component={ResetPassword} />
                <Route path ="/Discover" component={Discover} />

                <Route  path ="/*" component={() => "Error 404 Page Not Found"} />
              </Switch>
            </div>
        </BrowserRouter>
      </PersistGate>
    </Provider>
  );
}

export default App; 

store.js

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const initialState = {};

const middleware = [thunk];

const persistConfig = {
    key: 'root',
    storage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)


const store = createStore(
    persistedReducer,
    //rootReducer, 
    //persistedStorage,
    initialState,
    compose(applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
));

const persistor = persistStore(store);

export {store, persistor};

以下是我控制台中的完整错误

Uncaught 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
    at resolveDispatcher (react.development.js:1465)
    at useMemo (react.development.js:1520)
    at Provider (Provider.js:10)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (register.css?0d8b:45)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
index.js:1 The above error occurred in the <Provider> component:
    in Provider (at App.js:19)
    in App (at src/index.js:10)
    in StrictMode (at src/index.js:9)

Consider adding an error boundary to your tree to customize error handling behavior.
console.<computed> @ index.js:1
react-dom.development.js:22665 Uncaught 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
    at resolveDispatcher (react.development.js:1465)
    at useMemo (react.development.js:1520)
    at Provider (Provider.js:10)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (register.css?0d8b:45)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Answer 1

你必须做两件事：

1. 首先清除缓存npm cache clear或npm cache clear --force
2. 如果您之前未删除名为 node_modules1 的文件夹 node_modules。删除 node_modules1 文件夹。

然后重新开始npm start。

希望能解决问题。