错误：在使用 react-redux 时，Provider 的钩子调用无效答案

【问题标题】：Error: Invalid hook call at Provider,while using react-redux错误：在使用 react-redux 时，Provider 的钩子调用无效
【发布时间】：2020-02-04 09:52:30
【问题描述】：

我正在制作一个应用程序来从 url 获取参数并根据 url 的值工作，为了做到这一点，我尝试实现 redux，我想我编写了大部分代码，我是 react 和 redux 的初学者。当我在我的 index.js 文件中插入提供程序时，它给了我无效的 hookCall 错误。我遇到了一些帖子，但没有一个可以解决这个问题。喜欢:Attaching Provider of react-redux gives me an invalid hook error, https://github.com/reduxjs/react-redux/issues/1331

    index.js

    import React from 'react';
    import ReactDOM, {render} from 'react-dom';
    import { Provider } from 'react-redux';
    import App from "../src/App";
    import { createStore } from 'redux';
    import reducer from "../src/reducers/team_reducer";

    const store = createStore(reducer);
    render(<Provider store={store}> <App/> </Provider>, document.getElementById("root") )

控制台输出：

   react.development.js:1590 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:1590)
  at useMemo (react.development.js:1642)
  at Provider (Provider.js:10)
  at renderWithHooks (react-dom.development.js:16260)
  at mountIndeterminateComponent (react-dom.development.js:18794)
  at beginWork$1 (react-dom.development.js:20162)
  at HTMLUnknownElement.callCallback (react-dom.development.js:336)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
  at invokeGuardedCallback (react-dom.development.js:440)
  at beginWork$$1 (react-dom.development.js:25780)
  at performUnitOfWork (react-dom.development.js:24695)
  at workLoopSync (react-dom.development.js:24671)
  at performSyncWorkOnRoot (react-dom.development.js:24270)
  at scheduleUpdateOnFiber (react-dom.development.js:23698)
  at updateContainer (react-dom.development.js:27103)
  at react-dom.development.js:27528
  at unbatchedUpdates (react-dom.development.js:24433)
  at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
  at render (react-dom.development.js:27608)
  at Module../src/index.js (index.js:11)
  at __webpack_require__ (bootstrap:785)
  at fn (bootstrap:150)
  at Object.1 (snackBar.js:37)
  at __webpack_require__ (bootstrap:785)
  at checkDeferredModules (bootstrap:45)
  at Array.webpackJsonpCallback [as push] (bootstrap:32)
  at main.chunk.js:1
  resolveDispatcher @ react.development.js:1590
  useMemo @ react.development.js:1642
  Provider @ Provider.js:10
  renderWithHooks @ react-dom.development.js:16260
  mountIndeterminateComponent @ react-dom.development.js:18794
  beginWork$1 @ react-dom.development.js:20162
  callCallback @ react-dom.development.js:336
  invokeGuardedCallbackDev @ react-dom.development.js:385
  invokeGuardedCallback @ react-dom.development.js:440
  beginWork$$1 @ react-dom.development.js:25780
  performUnitOfWork @ react-dom.development.js:24695
  workLoopSync @ react-dom.development.js:24671
  performSyncWorkOnRoot @ react-dom.development.js:24270
  scheduleUpdateOnFiber @ react-dom.development.js:23698
  updateContainer @ react-dom.development.js:27103
  (anonymous) @ react-dom.development.js:27528
  unbatchedUpdates @ react-dom.development.js:24433
  legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527
  render @ react-dom.development.js:27608
  ./src/index.js @ index.js:11
  __webpack_require__ @ bootstrap:785
  fn @ bootstrap:150
  1 @ snackBar.js:37
  __webpack_require__ @ bootstrap:785
 checkDeferredModules @ bootstrap:45
 webpackJsonpCallback @ bootstrap:32
 (anonymous) @ main.chunk.js:1
 index.js:1 The above error occurred in the <Provider> component:
 in Provider (at src/index.js:11)

 Consider adding an error boundary to your tree to customize error handling 
 behavior.

减速器。 js

 import React from "react";

 const in i State = {
 team_id : null,
 is Valid Signup : false
 }

 function reducer (state = in i State, action) {
 console.log("check ",state,action);

 switch(action.type) {
    case "ADD_TEAM" : return { team_id : action.team_id, is Valid Signup : 
 true };
    case 'NEW_TEAM' : return { team_id : null, is Valid Signup : true };
    default : return state;
  }
 }

 export default reducer;

向我询问任何代码，因为我真的需要弄清楚这一点。

【问题讨论】：

请与您的日志中的错误堆栈分享确切的错误消息
也请分享reducer代码
我已经编辑了帖子@realAlexBarge
同样的错误，npm update 帮我解决了
我得到完全相同的错误和相同的日志没有任何帮助。

标签： reactjs redux react-redux

【解决方案1】：

我也有类似的问题；我通过运行 npm install react-redux redux 解决了这个问题。试试看。

【讨论】：

这对我有用。谢谢。

【解决方案2】：

正如日志所示，您可能违反了 Hooks 规则。请尝试将 redux 提供程序、存储设置和 reducer 包装在功能性反应组件中。

例如：

    import React from 'react';
    import ReactDOM, {render} from 'react-dom';
    import { Provider } from 'react-redux';
    import App from "../src/App";
    import { createStore } from 'redux';
    import reducer from "../src/reducers/team_reducer";

    const AppWrapper = ({ children }) => {
        const store = createStore(reducer);

        return (<Provider store={store}>{children}</Provider>);
    }

    render(<AppWrapper> <App /> </AppWrapper>, document.getElementById("root") )

也请查看https://reactjs.org/docs/hooks-rules.html

【讨论】：

感谢您的帮助。但它给出了指向 Provider 的相同错误。
请检查这个最小实现：codesandbox.io/s/hidden-water-2z0vl 你能重现错误吗？请确保更新所有依赖项。
我试图重新创建它，但我做不到。它只在我的项目中显示错误
对不起，如果它不可复制，真的帮不了你。请确保使用npm update 更新所有依赖项和/或手动检查您是否使用最新版本。
我不知道发生了什么。一旦我再次 npm 安装 redux 和 react-redux，一切都开始工作了。无论如何，感谢您尝试帮助我。

【解决方案3】：

如果您只是在访问参数之后，那么我建议您制作一个自定义挂钩来访问参数，而不是使用 redux 来执行此操作。我就是这样做的。

//make a separate file eg:useGetParameter.js
//By add use in front of functions name it becomes a custom hook

import { useLocation } from "react-router-dom";

export default function useGetParameter(name: string) {
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  return query.get(name);
}

然后在您要访问该参数的主文件中像这样使用它。例如：如果你想从 http://example.com?id=2

访问 id

//...
import useGetParameter from './path';

export default function App(){
   const id = useGetParameter('id');

  //...
}

【讨论】：

【解决方案4】：

React 和 React DOM 的版本不匹配

首先，您应该检查您的 react-com 版本，可能是该版本还不支持 hooks。（也许将这些添加到您的问题中，以便我们知道它们不会导致错误）

打破挂钩规则

如果这没有帮助，也许将eslint-plugin-react-hooks plugin 添加到您的包中，这将帮助您发现很多错误。

复制反应

为了使钩子起作用，从应用程序代码中导入的 React 需要解析为与从 react-dom 包中导入的 React 相同的模块。

如果您使用 Node 进行包管理，您可以在您的项目文件夹中运行此检查：

npm ls react

有关此错误的更多信息，请查看他们的Docs。

【讨论】：

感谢您的努力，但我已经尝试了您提到的所有内容，也许就我而言，我正在使用类组件，这就是它导致问题的原因
对，redux 不支持类。 link

【解决方案5】：

这是一个非常令人困惑的模式，可能会导致其他问题

 const in i State = {
 team_id : null,
 is Valid Signup : false
 }

重构

const initialState = {
team_id: null,
is_valid_signup: false
}

那么你的reducer如下：

 function reducer (state = initialState, action) {

 switch(action.type) {
    case 'ADD_TEAM': 
      return {
        ...state, 
        team_id: action.team_id,
        is_valid_signup: true
        }; 
    case 'NEW_TEAM': 
      return { 
        ...state,
        team_id: null,
        is_valid_signup: true
       };
    default: 
      return state;
  }
 }

这可能不相关，但它可能会在你的 Redux 中抛出一些东西。

【讨论】：

【解决方案6】：

我通过检查堆栈的版本兼容性解决了同样的问题，这就是我修复该错误消息的方法。这就是我的 package.json 文件中的内容：

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.0",
"redux": "^4.0.5",

【讨论】：