LocalStorage 和 UseEffect

Question

我在 React 中渲染屏幕时遇到问题。我有两个模块：登录和仪表板。当用户通过身份验证且 api 的结果为 'Ok' 时，我将本地存储变量 'isLoggedIn' 设置为 true 并将用户发送到仪表板屏幕。然后在仪表板中，我检查这个变量是否为真，如果没问题我显示仪表板，但如果变量为假（导致用户按下仪表板中的注销按钮），我将变量设置为假并移动用户再次登录屏幕。

那里一切正常，但我需要控制未登录用户是否尝试通过 url (/dashboard) 访问仪表板，并限制该访问，我有一些条件检查是否localstorage 变量是真还是假，但如果 localstorage 'isloggedIn" 是 true 并且我不知道为什么，它总是落入这种情况。我分离下面的代码。

const Dashboard = () => {

useEffect(() => {
 }, [localStorage.getItem('isLoggedIn')]);

  return (
 <div style={{ alignContent: "center" }}>  
   {localStorage.getItem('isLoggedIn') && <div><HeaderLogout /> <Content /></div>}
   {!localStorage.getItem('isLoggedIn') && <div><HeaderLogin /></div>}
 </div>
 );
};

export default Dashboard;

Answer 1

您的条件最有可能失败的主要原因是因为 localStorage 将值 仅存储为字符串 。您的 isLoggedIn 值存储为“true”和“false”，它们都等于 true（在 JS 中，non-empty 字符串被视为 truthy）。

你需要做的是JSON.parse()变量，然后检查你的条件。

const Dashboard = () => {

useEffect(() => {
 }, [localStorage.getItem('isLoggedIn')]); // you can leave this dependency array this way, but it's useless since change in localStorage does not cause rerenders, so the effect won't ever know when the value changes unless some other state change takes place

  const isLoggedIn = JSON.parse(localStorage.getItem("isLoggedIn")); // may need to handle additional error handling

  return (
 <div style={{ alignContent: "center" }}>  
   {isLoggedIn && <div><HeaderLogout /> <Content /></div>}
   {!isLoggedIn && <div><HeaderLogin /></div>}
 </div>
 );
};

export default Dashboard;

Answer 2

localStorage.getItem('isLoggedIn') 是一个字符串，所以当为“false”时，该表达式始终为 true。

如果你想像逻辑值一样使用它，你必须声明一个变量

let isLoggedIn = JSON.parse(localStorage.getItem('isLoggedIn'))

然后使用而不是 localStorage.getItem。

记得在反向操作中做JSON.stringify()

LocalStorage 和 UseEffect

LocalStorage and UseEffect

reactjs

dashboard