'useEffect() is not able to load data for the second time as soon as the page loaded manually
this is app.js
import Header from './components/Header/Header';
import Login from './components/Login/Login';
import { BrowserRouter as Router, Route,Routes } from "react-router-dom";
import Register from './components/Register/Register';
import About from './components/About/About';
import Update from './components/Update/Update';
import Contact from './components/Contact/Contact';
import Home from './components/Home/Home';
import Logout from './components/Logout/Logout';
import Project from './components/Project/Project';
import Error from './components/Error';
import { useDispatch,useSelector } from 'react-redux';
import { useEffect } from 'react';
import { loadUser } from './actions/userActions';
function App() {
const dispatch = useDispatch();
const {loading, user} = useSelector((state) => state.user);
useEffect(() => {
dispatch(loadUser());
}, [dispatch]);
return (
<div className="App">
<Router>
<Header />
<Routes>
<Route exact path="/" element={<Home
userhome = {user} />} />
<Route exact path="/login" element={<Login />} />
<Route exact path="/signup" element={<Register />} />
<Route exact path="/about" element={<About /> } />
<Route exact path="/update" element={<Update /> } />
<Route exact path="/contact" element={<Contact /> } />
<Route exact path="/logout" element={<Logout /> } />
<Route exact path="/project" element={<Project /> } />
<Route exact path="/profile" element={<About /> } />
<Route path="*" element={<Error />} />
</Routes>
</Router>
</div>
);
}
export default App;
this is home.js
in any react app, "localhost:3000" will automatically get rendered (if there is no error).
In my case also same thing is happening, when the react app loads for the first time, it does not give any error.
The output for first time is Name : Prajwal Raj
But as soon as i load the same home route for second time is gives error ,
Cannot read properties of undefined (reading 'name')
const Home = ({userhome}) =>{
return (
<div className="home">
<h1>HOME</h1>
<p>Name : {userhome.name}</p>
</div>
);
};
export default Home;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
