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

Question

我正在制作一个应用程序来从 url 获取参数并根据 url 的值工作，为了做到这一点，我尝试实现 redux，我想我编写了大部分代码，而且我是 react 和 redux 的初学者。当我在 index.js 文件中插入提供程序时，它给了我无效的 hookCall 错误。我遇到了一些帖子，但没有一个可以解决问题。像：附加 react-redux 的提供者给了我一个无效的钩子错误， 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;

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

Answer 1

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

Answer 2

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

例如：

    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