本地主机存储答案

【问题标题】：Localhost storage本地主机存储
【发布时间】：2020-06-18 21:11:07
【问题描述】：

所以下面的代码是我试图让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;

【问题讨论】：

你能清理一下你的代码示例吗？您发布的不是有效的 JS。
我们在这里缺少您的部分逻辑。如果您在离开页面时丢失状态，则可能需要useEffect() 中的函数在卸载之前将用户状态返回到本地存储。不过，这只是一个猜测。你能展示你的其余代码吗？
当然 - 我以为会太长，抱歉！
更新了！所以当我刷新 /homepage 时，localstorage 会持续存在，但是当我刷新 /artist 时，localstorage 不会持续存在。

标签： reactjs local-storage use-context

【解决方案1】：

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

【讨论】：