React 组件总是返回第一个代码答案

【问题标题】：React components always return the first codeReact 组件总是返回第一个代码
【发布时间】：2021-08-15 07:45:29
【问题描述】：

我有一个需要身份验证的聊天应用程序。使用 cookie。我在这里尝试：

class AppHeader extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        if (cookies.get('token') !== undefined || cookies.get('token') !== '') {
            return (<div className={styles.container}>
                <button onClick={this.stravante}>[ Logout ]</button>
            </div>)
        } else {
            return (<div></div>)
        }
    }
}

它总是返回：

即使 cookie token 为空或未定义。我尝试了很多方法，比如使用状态。

【问题讨论】：

如果您在用户应该退出时执行console.log(cookies.get('token').length) 会发生什么？它应该返回 0——如果不是，你有一个空格让它返回 true。
不，我还可以在应用程序面板上看到 cookie

标签： javascript node.js reactjs next.js

【解决方案1】：

不确定您为cookies 使用的是哪个库，但在javascript 中您会找到undefined !== ''。所以如果cookies.get('token') 是undefined 那么cookies.get('token') !== '' 将永远是true。

最简单的解决方法是将其设为&&，例如：

const tokenCookie = cookies.get('token');
if (tokenCookie !== undefined && tokenCookie !== '') {
  return (<div className={styles.container}>
    <button onClick={this.stravante}>[ Logout ]</button>
   </div>);
} else {
  return (<div></div>)
}

【讨论】：

【解决方案2】：

在 javascript 中 undefined 和 '' 都是假值。无需明确检查。将您的 if 条件 if (cookies.get('token') !== undefined || cookies.get('token') !== '') 更改为 if (cookies.get('token'))

【讨论】：