上述错误发生在<Provider>组件中

Question

找不到解决此问题的方法。

\n

浏览器中的错误：

\n

\n

1. 未捕获的错误：无效的挂钩调用。挂钩只能在函数组件的主体内部调用。发生这种情况的原因可能是\n以下原因之一：

   \n
   \n
   • 您的 React 和渲染器版本可能不匹配（例如 React DOM）
   \n
   • 你可能违反了 Hooks 规则
   \n
   • 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call了解有关如何调试和解决此问题的提示。
   \n
   \n
\n

2. 组件中出现上述错误：

   \n

   提供商@http://localhost:3000/static/js/bundle.js:49534:15

   \n

   考虑向树添加错误边界以自​​定义错误\n处理行为。访问https://reactjs.org/link/error-boundaries \n了解有关错误边界的更多信息。

   \n
\n

\n

索引.JS

\n

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport Router from \'./Router\';\n\nimport { createStore } from \'redux\'\nimport { composeWithDevTools } from \'redux-devtools-extension\'\nimport { Provider } from \'react-redux\'\nimport rootReducer from \'./Redux/Reducers/index.js\'\n\n\nconst store = createStore( rootReducer, composeWithDevTools() )\n\nReactDOM.render(\n  <Provider store={ store }>\n    <Router />\n  </Provider >,\n  document.getElementById( \'root\' ) );\n

\n

减速器/index.js

\n

import loginPageReducer from \'./LoginPage.js\'\nimport { combineReducers } from \'redux\'\n\n\nconst rootReducer = combineReducers( {\n   loginPageReducer\n} )\n\nexport default rootReducer\n

\n

减速器/LoginPage.js

\n

const INIT_STATE = {\n   view: \'login\',\n   msg: \'\',\n   loader: false,\n}\n\nconst loginPageReducer = ( state = INIT_STATE, action ) =>\n{\n\n   switch ( action.type )\n   {\n      case "LOADER_OFF":\n         return state.loader = false\n\n      case "LOADER_ON":\n         return state.loader = true\n\n      case "MSG_SET":\n         return state.msg = action.msg\n\n      case "MSG_CLEAR":\n         return state.msg = \'\'\n\n      case "VIEW_CHANGE":\n         return state.view = action.view\n\n      default:\n         return state;\n   }\n}\n\n\nexport default loginPageReducer\n

\n

登录页面组件

\n

import React, { useState } from \'react\'\nimport \'../Styles/loginPage.scss\'\nimport axios from \'axios\'\nimport { useDispatch, useSelector } from \'react-redux\'\nimport loginPageActions from \'../Redux/actions/LoginPage\'\n\nexport default function LoginPage () \n{\n   const { msg_clear, msg_set, loader_off, loader_on, view_change } = loginPageActions\n   const msg = useSelector( state => state.LoginPageReducer.msg )\n   const view = useSelector( state => state.LoginPageReducer.view )\n   const loader = useSelector( state => state.LoginPageReducer.loader )\n   const dispatch = useDispatch()\n\n   const [inputs, setInputs] = useState( {\n      username: \'\',\n      password: \'\',\n      password2: \'\',\n      email: \'\'\n   } )\n\n   const handleInputs = function ( e )\n   {\n      const { name, value } = e.target\n      setInputs( { ...inputs, [name]: value } )\n   }\n\n\n   const handleSubmit = async ( e ) =>\n   {\n      try \n      {\n         e.preventDefault();\n         dispatch( msg_clear() )\n         dispatch( loader_on() )\n\n         if ( view === login)\n         {\n            // logowanie\n            const query = await axios( {\n               method: \'post\',\n               url: \'/api/users/login\',\n               data: {\n                  username: inputs.username,\n                  password: inputs.password\n               }\n            } )\n\n            const token = query.data.token\n            localStorage.setItem( "token", token );\n            return window.location.href = "/kalkulator"\n\n         }\n         else\n         {\n            //rejestracja\n            const query = await axios( {\n               method: \'post\',\n               url: \'/api/users/register\',\n               data: {\n                  username: inputs.username,\n                  password: inputs.password,\n                  password2: inputs.password2,\n                  email: inputs.email\n               }\n            } )\n\n            if ( query.status === 200 )\n            {\n               dispatch( msg_set( \'Zarejestrowano, mo\xc5\xbcesz si\xc4\x99 zalogowa\xc4\x87\' ) )\n               dispatch( view_change( true ) )\n            }\n         }\n      }\n      catch ( err ) \n      {\n         if ( err ) return dispatch( msg_set( err.response.data.msg ) )\n      }\n      finally\n      {\n         dispatch( loader_off() )\n      }\n   }\n\n\n\n   /////////////\n   /// Renderowanie widoku\n   /////////////\n\n\n   return (\n      <main>\n         <div id="MainContainerStyle">\n            <span id="thatWhitePartOnBottom"></span>\n            <header>\n               <h1 id="HeaderH1" >Kalkulator mas</h1>\n            </header>\n\n\n\n            <button className="Buttons" onClick={ () => dispatch( view_change( !view ) ) }>\n               { view ?\n                  `Already have account? Click to log in!`\n                  :\n                  `Doesn\'t have account? Click me if you want to register new one` }\n            </button>\n\n\n            <form onSubmit={ handleSubmit } id="Form">\n               <input type="text"\n                  value={ inputs.username }\n                  placeholder={ view ? \'username\' : \'Login or E-mail\' }\n                  name="username" required onChange={ handleInputs }\n               />\n\n               { view ?\n                  <input type="email"\n                     placeholder="email"\n                     name="email"\n                     value={ inputs.email }\n                     required\n                     onChange={ handleInputs } />\n                  :\n                  null\n               }\n               <input type="password"\n                  value={ inputs.password }\n                  placeholder="Password:"\n                  name="password"\n                  required\n                  onChange={ handleInputs }\n               />\n\n               { view ?\n                  <input type="password"\n                     value={ inputs.password2 }\n                     placeholder="Password again:"\n                     name="password2"\n                     required\n                     onChange={ handleInputs } />\n                  :\n                  null\n               }\n               <input type="submit" className="Buttons" />\n\n               { loader ? <span className="loader"></span> : null }\n               { msg !== \'\' ? <p className="msg">{ msg }</p> : null }\n            </form>\n         </div>\n      </main>\n   )\n}\n

\n

路由器

\n

import { BrowserRouter, Routes, Route } from "react-router-dom";\nimport \'./Styles/global.scss\'\n\nimport LoginPage from "./Pages/LoginPage";\nimport Kalkulator from "./Pages/Kalkulator";\n\nfunction App ()\n{\n  return (\n    <>\n      <BrowserRouter>\n        <Routes>\n          <Route path="/" element={ <LoginPage /> } />\n          <Route path="/kalkulator" element={ <Kalkulator /> } />\n        </Routes>\n      </BrowserRouter>\n    </>\n  )\n}\n\nexport default App;\n

\n

Answer 1

可能是这个问题：https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

\n

假设 myapp 和 mylib 是同级文件夹，一种可能的修复方法是从 mylib 运行 npm link ../myapp/node_modules/react。这应该使库使用 application\xe2\x80\x99s React 副本。

\n

..或者可能“react-redux”没有安装，检查package.json

\n