问如何在react中使localStorage反应？
EN

Stack Overflow用户

提问于 2021-11-07 07:33:30

回答 2查看 144关注 0票数 4

我使用localStorage在登录时保存用户数据。我已经将其命名为"jwt_data“。我已经在saperate js文件上创建了一个函数来检索数据，如下所示

export const auth = () => {
  if(localStorage.getItem('jwt_data')){
    return JSON.parse(localStorage.getItem('jwt_data'))
  }else{
    return false
  }
}

我在react上有一个带有<徽标，搜索栏，dropdown>的导航栏组件。我想在用户注销后隐藏它，并在我登录时显示它。我使用代码作为

const auth_user = auth()
........
<>
{auth_user ? (// if logged in..... )  : (// if user is logged out........)

</>

它确实起作用了。但问题是，它不是反应性的。我需要重新加载网站才能看到这种效果。

我还尝试使用其他方法，比如

const [auth_user, setAuth_user] = useState(false)
useEffect(() => {
 if(auth()) {setAuth_user(true)}    
 else {setAuth_user(false)}
})

它们的结果与前面的相同。我不知道我哪里错了。其他人建议使用redux和things，这对我的头脑和简单的应用程序来说太复杂了。

我的app.js看起来像这样

import React from 'react';
import Nav from './Nav';
import Home from './Home';
import Login from './Login';
import Logout from './Logout';


function App() {
  return (
    <div className="App">
      <Router>
     <Router>
      <Nav/>
      <Routes>
        <Route exact path="/home" element={<Home/>}/>
        <Route exact path="/login" element={<Login/>}/>
        <Route exact path="/logout" element={<Logout/>}/>
      </Routes>
      </Router>
    </div>
  );
}

登录后，我移动到主页，同时，我想删除导航栏中的所有内容，只显示身份验证，就像在这种情况下，也是一般的其他情况。

我有什么遗漏的吗？谢谢你友善的回答。

local-storage

javascript

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-11-07 09:23:03

所以在本例中需要使用useContext。

在你的app.js中

import React, { useContext } from "react";

export const AuthContext = React.createContext(null);

function App() {

  const [authContext, setAuthContext] = useState(localStorage.getItem("auth"));

  return (
    <AuthContext.Provider value={authContext, setAuthContext}>
      <Router>
        <Nav/>
        <Routes>
          <Route exact path="/home" element={<Home/>}/>
          <Route exact path="/login" element={<Login/>}/>
          <Route exact path="/logout" element={<Logout/>}/>
        </Routes>
      </Router>
    </AuthContext.Provider>
  );
}

然后在你的Nav.js中

import React, { useContext } from "react";
import { AuthContext } from "./App.js"

function Nav() {

  const [authContext, setAuthContext] = useContext(AuthContext);

  return (
    authContext
      ? /*Navbar with user stuff*/
      : /*Empty Navbar */
  )
}

在您的Login组件中：

import React, { useContext } from "react";
import { AuthContext } from "./App.js"

function Login() {

  const [authContext, setAuthContext] = useContext(AuthContext);

  const login = () => {
    const jwt = "jwt"; // fetch your jwt
    localStorage.setItem("auth", jwt)
    setAuthContext(jwt);
  }

  return (
    <div>Login form</div>
  )
}

和注销：

import React, { useContext } from "react";
import { AuthContext } from "./App.js"

function Logout() {

  const [authContext, setAuthContext] = useContext(AuthContext);

  const logout = () => {
    localStorage.setItem("auth", null)
    setAuthContext(null);
  }

  return (
    <button onClick={logout}>Logout button</button>
  )
}

票数 2

Stack Overflow用户

发布于 2021-11-07 09:31:14

我认为这里的问题是，您将localStorage视为您的状态，这在React空间中是不太正确的。为了让组件进行更新，您需要将此信息保持在组件可以订阅的状态。React状态(useState)或全局状态(redux、context等)。

那么你的locale存储键就是初始化这个状态(例如刷新时)的一种方式。因此，当登录状态更改时，您必须同时更新这两个状态。

为了简单起见，最好的方法是在应用程序组件中创建一个loggedIn状态，然后将loggedIn状态(导航组件)或setLoggedIn设置器(登录/注销组件)委托给子组件来更新它。

您可以找到有关如何创建利用this one等localeStorage用法的react挂钩的示例。你可以在下面找到你的应用程序的代码，如果你使用的是链接中的useLocalStorage，或者任何其他类似的实现。

import React from 'react';
import Nav from './Nav';
import Home from './Home';
import Login from './Login';
import Logout from './Logout';
import useLocaleStorage from 'somewhere'


function App() {
  const [loggedIn, setLoggedIn] = useLocalStorage('jwt_data', false);

  return (
    <div className="App">
      <Router>
     <Router>
      <Nav loggedIn={loggedIn} /> // and hide what's need to be hidden
      <Routes>
        <Route exact path="/home" element={<Home/>}/>
        <Route exact path="/login" element={<Login setLoggedIn={setLoggedIn} />}/>
        <Route exact path="/logout" element={<Logout setLoggedIn={setLoggedIn} />}/>
      </Routes>
      </Router>
    </div>
  );
}