javascript - react : Inline if doesn't resolve to false when value is 'undefined'

Question

首先，考虑到这个问题似乎很明显，我进行了大量的研究来找到答案，但不幸的是我找不到。如果之前有人问过这个问题，请提前致歉。

我目前正在学习 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' }} />
    )} />
  )
}

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

此外，我还尝试了 !!localStorage.getItem('user') ，它也没有解析为 false，也没有重定向到预期的页面。

但是，localStorage.getItem('user') !== 'undefined' 的作用就像一个魅力。

我在这里缺少什么？

谢谢

编辑:

条件 localStorage.getItem('user') === undefined 工作正常，但为什么 localStorage.getItem('user') 不能解析为 < em>falsy 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，这导致在 localStorage 中设置 undefined。

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

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

感谢大家的帮助! :)

Answer 1

冒着陈述显而易见的危险，您的存储包含 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"