Ошибка: недопустимый перехват вызова у провайдера при использовании response-redux

Question

Я делаю приложение для получения параметров из URL-адреса и работаю на основе значений URL-адреса. Для этого я попытался реализовать избыточный код, я думаю, что написал большую часть кода, и я новичок в реагировании и избыточности. Пока я вставляю провайдера в файл index. js, он выдает мне недопустимую ошибку hookCall. Я сталкивался с некоторыми сообщениями, но ни одна не смогла решить проблему. как: При подключении Поставщик response-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

Как показывает журнал, вы, вероятно, нарушаете Правила Крюков. Пожалуйста, попробуйте обернуть провайдера редукса, настройки магазина и редуктора в функциональный компонент реакции.

Например:

    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