I get the following error in console with blank localhost screen(no errors in terminal):

VM256:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at App.js:18:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)

This is the App.js file

import React,{useEffect,createContext,useReducer,useContext} from 'react';
import NavBar from './components/Navbar';
import "./App.css"
import {BrowserRouter,Route,Routes,useNavigate} from 'react-router-dom';
import Home from './components/screens/Home';
import Signup from './components/screens/Signup';
import Signin from './components/screens/Signin';
import Profile from './components/screens/Profile';
import CreatePost from './components/screens/CreatePost';
import { reducer,initialState } from './reducers/userReducer';

const UserContext=createContext()

const Routing=()=>{
  const Navigate=useNavigate()
  const {state,dispatch}=useContext(UserContext)
  useEffect(()=>{
    const user=JSON.parse(localStorage.getItem("user"))
    if(user){
      dispatch({type:"USER",payload:user})
      Navigate.push('/')
    }
    else{
      Navigate.push('/signin')
    }
  },[])

  return(
      <Routes>
      <Route exact path="/" element={<Home />}/>
        <Route path="/signin" element={<Signin />}/>
        <Route path="/signup" element={<Signup />}/>
        <Route path="/profile" element={<Profile />}/>
        <Route path="/createpost" element={<CreatePost />}/>
    </Routes>
  )
}


function App() {
  const [state,dispatch]=useReducer(reducer,initialState)
  return (
    <UserContext.Provider value ={{state,dispatch}}>
    <BrowserRouter>
    <NavBar/>
    <Routing/>
    </BrowserRouter>
    </UserContext.Provider>
  );
}

export default App;

I have tried using JSON.parse(JSON.stringify(...)), but then I get the error that Navigate.push is not a function. Also when I do console log to see object type it should be a string but here it's undefined. Any help would be great! Thank you!

CodePudding user response：

let u = localStorage.getItem("user");
let user=null;
if(typeof u === 'object'){
   user = JSON.parse(u);
}

CodePudding user response：

The problem is very simple

const user=JSON.parse(localStorage.getItem("user"))

You're parsing it twice. getItem uses the dataType='json', so data is already in json format. You can directly store it in a variable.

const user= localStorage.getItem("user")