Reputation: 33
can't find way how to resolve this problem.
Errors in browser:
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:
The above error occurred in the component:
Provider@http://localhost:3000/static/js/bundle.js:49534:15
Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './Router';
import { createStore } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import { Provider } from 'react-redux'
import rootReducer from './Redux/Reducers/index.js'
const store = createStore( rootReducer, composeWithDevTools() )
ReactDOM.render(
<Provider store={ store }>
<Router />
</Provider >,
document.getElementById( 'root' ) );
Reducers/index.js
import loginPageReducer from './LoginPage.js'
import { combineReducers } from 'redux'
const rootReducer = combineReducers( {
loginPageReducer
} )
export default rootReducer
Reducers/LoginPage.js
const INIT_STATE = {
view: 'login',
msg: '',
loader: false,
}
const loginPageReducer = ( state = INIT_STATE, action ) =>
{
switch ( action.type )
{
case "LOADER_OFF":
return state.loader = false
case "LOADER_ON":
return state.loader = true
case "MSG_SET":
return state.msg = action.msg
case "MSG_CLEAR":
return state.msg = ''
case "VIEW_CHANGE":
return state.view = action.view
default:
return state;
}
}
export default loginPageReducer
loginPage component
import React, { useState } from 'react'
import '../Styles/loginPage.scss'
import axios from 'axios'
import { useDispatch, useSelector } from 'react-redux'
import loginPageActions from '../Redux/actions/LoginPage'
export default function LoginPage ()
{
const { msg_clear, msg_set, loader_off, loader_on, view_change } = loginPageActions
const msg = useSelector( state => state.LoginPageReducer.msg )
const view = useSelector( state => state.LoginPageReducer.view )
const loader = useSelector( state => state.LoginPageReducer.loader )
const dispatch = useDispatch()
const [inputs, setInputs] = useState( {
username: '',
password: '',
password2: '',
email: ''
} )
const handleInputs = function ( e )
{
const { name, value } = e.target
setInputs( { ...inputs, [name]: value } )
}
const handleSubmit = async ( e ) =>
{
try
{
e.preventDefault();
dispatch( msg_clear() )
dispatch( loader_on() )
if ( view === login)
{
// logowanie
const query = await axios( {
method: 'post',
url: '/api/users/login',
data: {
username: inputs.username,
password: inputs.password
}
} )
const token = query.data.token
localStorage.setItem( "token", token );
return window.location.href = "/kalkulator"
}
else
{
//rejestracja
const query = await axios( {
method: 'post',
url: '/api/users/register',
data: {
username: inputs.username,
password: inputs.password,
password2: inputs.password2,
email: inputs.email
}
} )
if ( query.status === 200 )
{
dispatch( msg_set( 'Zarejestrowano, możesz się zalogować' ) )
dispatch( view_change( true ) )
}
}
}
catch ( err )
{
if ( err ) return dispatch( msg_set( err.response.data.msg ) )
}
finally
{
dispatch( loader_off() )
}
}
/////////////
/// Renderowanie widoku
/////////////
return (
<main>
<div id="MainContainerStyle">
<span id="thatWhitePartOnBottom"></span>
<header>
<h1 id="HeaderH1" >Kalkulator mas</h1>
</header>
<button className="Buttons" onClick={ () => dispatch( view_change( !view ) ) }>
{ view ?
`Already have account? Click to log in!`
:
`Doesn't have account? Click me if you want to register new one` }
</button>
<form onSubmit={ handleSubmit } id="Form">
<input type="text"
value={ inputs.username }
placeholder={ view ? 'username' : 'Login or E-mail' }
name="username" required onChange={ handleInputs }
/>
{ view ?
<input type="email"
placeholder="email"
name="email"
value={ inputs.email }
required
onChange={ handleInputs } />
:
null
}
<input type="password"
value={ inputs.password }
placeholder="Password:"
name="password"
required
onChange={ handleInputs }
/>
{ view ?
<input type="password"
value={ inputs.password2 }
placeholder="Password again:"
name="password2"
required
onChange={ handleInputs } />
:
null
}
<input type="submit" className="Buttons" />
{ loader ? <span className="loader"></span> : null }
{ msg !== '' ? <p className="msg">{ msg }</p> : null }
</form>
</div>
</main>
)
}
Router
import { BrowserRouter, Routes, Route } from "react-router-dom";
import './Styles/global.scss'
import LoginPage from "./Pages/LoginPage";
import Kalkulator from "./Pages/Kalkulator";
function App ()
{
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={ <LoginPage /> } />
<Route path="/kalkulator" element={ <Kalkulator /> } />
</Routes>
</BrowserRouter>
</>
)
}
export default App;
Upvotes: 2
Views: 26690
Reputation: 66
might be this problem: https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.
..or maybe "react-redux" is not installed, check package.json
Upvotes: 5