首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在react中使localStorage反应?

如何在react中使localStorage反应?
EN

Stack Overflow用户
提问于 2021-11-07 15:33:30
回答 2查看 144关注 0票数 4

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

代码语言:javascript
代码运行次数:0
运行
复制
export const auth = () => {
  if(localStorage.getItem('jwt_data')){
    return JSON.parse(localStorage.getItem('jwt_data'))
  }else{
    return false
  }
}

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

代码语言:javascript
代码运行次数:0
运行
复制
const auth_user = auth()
........
<>
{auth_user ? (// if logged in..... )  : (// if user is logged out........)

</>

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

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

代码语言:javascript
代码运行次数:0
运行
复制
const [auth_user, setAuth_user] = useState(false)
useEffect(() => {
 if(auth()) {setAuth_user(true)}    
 else {setAuth_user(false)}
})

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

我的app.js看起来像这样

代码语言:javascript
代码运行次数:0
运行
复制
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>
  );
}

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

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

EN

回答 2

Stack Overflow用户

回答已采纳

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

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

在你的app.js中

代码语言:javascript
代码运行次数:0
运行
复制
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中

代码语言:javascript
代码运行次数:0
运行
复制
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组件中:

代码语言:javascript
代码运行次数:0
运行
复制
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>
  )
}

和注销:

代码语言:javascript
代码运行次数:0
运行
复制
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
EN

Stack Overflow用户

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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
复制
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>
  );
}

然而,随着你的应用程序变得越来越复杂,你可能会重新考虑将其保持在一个内部的react状态,并使用context来避免从你的App组件到它的子组件的正确钻取。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69873857

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档