Question

所以下面的代码是我试图使localStorage保持用户状态超出页面刷新的方式。

这实际上在主页上有效，其中每当我刷新时，我看到localStorage确实确实存在，即使刷新也是如此。但是，当我通过与网页进行交互而在某处溃烂并刷新该页面时，我就失去了localStorage

我正在通过react useContext函数传递用户状态（其设置者是setUser）。有兴趣听到任何人的想法。谢谢！


import axios from 'axios'
import firebase from 'firebase/app';
import 'firebase/database';
import React, {useState, useContext, useEffect} from 'react';
import {Router } from  'react-router-dom'
import logo from './logo.svg';
import './App.css';
import Spotify from 'spotify-web-api-js';
import Homepage from './components/homepage';
import Login from './components/login'
import MapLeaflet from './components/MapLeaflet'
import {BrowserRouter, Route} from 'react-router-dom'
import Signup from './components/signup';
import ArtistPage from './components/artisthomepage'
import {dbMessages, dbPosts, dbSongs, dbArtists, dbReplies} from './firebase/firebase';

const s = new Spotify();

export const InfoContext = React.createContext();
function App() {

  const [artists, setArtists]=useState("")
  const [messages, setMessages]=useState("")
  const [songs, setSongs]=useState("")
  const [posts, setPosts]=useState("")
  const [replies, setReplies]=useState("")
  const [user, setUser]=useState("")
  const [accesstoken, setAccesToken]=useState("")
  const [refreshtoken, setRefreshToken]=useState("")

  React.useEffect(()=>{
    localStorage.setItem('user', JSON.stringify(user));
  }, []);
  React.useEffect(()=>{
    const data = localStorage.getItem('user');
    if(data){
      setUser(JSON.parse(data));
    }

  }, []);





  return(
    <BrowserRouter>
      <InfoContext.Provider value={{replies, setReplies, artists, setArtists, messages, setMessages, songs, setSongs,posts, setPosts, user, setUser, accesstoken, setAccesToken, refreshtoken, setRefreshToken}}>
        <Route exact path="/signup/:id/:access_token" render={()=><Signup />} />
        <Route exact path="/" render={()=><Login />} />

        <Route exact path="/home/:id/:access_token/:refresh_token"  render = {()=> <Homepage ></Homepage>} />


        <Route exact path="/artist/:artistid"  render = {()=> <ArtistPage ></ArtistPage>} />

        <Route exact path="/map" render={()=><MapLeaflet />} />
      </InfoContext.Provider>
    </BrowserRouter>
  );
}

export default App;

Answer 1

问题是在将用户设置为localstorage中的用户对象之前，我没有检查用户是否存在！您还需要在括号中添加用户，以便在何时运行useEffect。

本地主机存储

1 个答案: