时间戳

首页 > 解决方案 > 反应：当值为“未定义”时，内联如果不解析为假

javascript - 反应：当值为“未定义”时，内联如果不解析为假

问题描述

首先，考虑到这个问题似乎很明显，做了相当多的研究来找到答案，但不幸的是我做不到。如果之前有人问过这个问题，请提前道歉。

我目前正在学习 React+Redux 并且有一段非常简单的代码：

const AuthRoute = ({ component: Component, ...rest }) => {
  console.log(localStorage.getItem('user')); //undefined
  return (
    <Route {...rest} render={props => (
      localStorage.getItem('user') ?
        <Component {...props} /> :
        <Redirect to={{ pathname: '/login' }} />
    )} />
  )
}

执行此代码时，我预计未经身份验证的用户将被重定向到登录页面。但是，由于某种原因，解析为的内联if检查没有提供预期的结果。localStorage.getItem('user')undefined

此外，我也尝试过!!localStorage.getItem('user')它也不会解析为 false 并且不会重定向到预期的页面。

然而，localStorage.getItem('user') !== 'undefined'它就像一个魅力。

我在这里想念什么？

谢谢

编辑：

条件localStorage.getItem('user') === undefined工作正常，但为什么localStorage.getItem('user')不解决一个虚假 if的结果本身？

本地存储内容：

Storage {darkyMode: "1", darkyState: "f", user: "undefined", darkySupported: "t", length: 4}
length: 4
darkyMode: "1"
darkyState: "f"
user: "undefined"
darkySupported: "t"
__proto__: Storage

最终编辑：

因此，在将代码添加到 plunker 以供你们审查之前，我已经在我的应用程序中添加了更多登录信息，以确保我绝对不会遗漏一些明显的东西，并且一如既往，有一些明显的东西......

我的 userService 中有这段代码：

return axios.post(`${api}/users/login`, {email, password})
    .then(res => onSuccess(res.data))
    .catch(err => console.log(err));
    .finally(user => localStorage.setItem('user', JSON.stringify(user))

我不知道为什么我认为这是一个好主意...基本上，每次无法识别用户时，我都会返回message属性而不是user从 API 中返回，这导致undefined在localStorage.

以前，在该onSuccess方法中，我只返回数据，现在我正在对数据执行额外的检查并采取相应的行动，因此localStorage.setItem('user', JSON.stringify(user))从.finally进入onSuccess方法解决了问题。

将@Christian Fritz 的答案标记为正确。

感谢大家的帮助！:)

标签： javascriptreactjsredux

解决方案

冒着明显的危险，您的存储包含user: "undefined"，即一个字符串，所以是的，当然，localStorage.getItem('user') !== 'undefined'它可以工作，!localStorage.getItem('user')也不会。

我怀疑您正在测试已注销的案例错误。确保使用

localStorage.removeItem('user');

而不是 localStorage.setItem('user', undefined)。很容易测试这并不像人们期望的那样工作：

> localStorage.setItem('user', undefined)
undefined
> localStorage.getItem('user')
"undefined"

推荐阅读