如果语句不能正常工作 [React hooks]

Question

我正在使用 React Hooks 开发一个简单的网站。在该网站上，我想保护路由，如果我未获得授权，该网站应将我重定向到登录，否则转到我想要访问的路径。我有以下代码，无论状态是真还是假，它总是进入 else 语句。我的问题是这怎么可能，或者我是否做错了什么我没有注意到的事情？import React from "react";import { Route, Redirect } from "react-router-dom";import Login from "../auth/Login";function PrivateRoute({ component, ...options }) {  let status = localStorage.getItem("isAuth");  console.log("before if ", status);  if (status === true) {    console.log("if", status);    return <Route {...options} component={component} />;  } else {    console.log("else", status);    return <Route {...options} component={Login} />;  }}export default PrivateRoute;

Answer 1

比较status的方式是使用严格相等=== 因此，在您的情况下，它要求您的状态值必须为 boolean 。但是当你从 localStorage 获取它时，它是一个字符串。请记住=== 与不一样==

在许多浏览器中，本地存储只能存储string。因此，当您存储布尔值 true 或 false 时，它实际上存储字符串 "true" 或 "false" 。为了取回真正的布尔值，您可以使用 JSON。

或者就您的情况而言，您可以尝试比较status === "true"，看看是否有效。

Answer 2

当您从本地存储获取一些值时，它是一个字符串，因此使用它如下：

  let status = localStorage.getItem("isAuth") === "true";