条件渲染的问题

Question

我最近开始学习反应，只是为了练习目的，我正在尝试进行登录和注销，在这里我尝试使用条件渲染，将我的 isLoggedIn 存储到 state 并添加一个 {{ 1}} 用于显示用户是否登录的信息和 h1 用于在登录和注销之间切换

我向按钮添加了一个 onClick 事件，并在单击按钮时更改了状态，但不知何故它无法正常工作而不给我错误，这是我的代码：

button

Answer 1

这不是你所期望的：

this.setState((prevState) => {
    isLoggedIn: !prevState.isLoggedIn
})

在此语法中，大括号表示函数，而不是对象。由于该函数没有返回任何内容，因此状态被设置为空。

（此外，该函数所做的不直观，但在技术上仍然有效。它是 creating a label 而不是赋值。）

将花括号包裹起来，使它们成为函数返回的对象：

this.setState((prevState) => ({
    isLoggedIn: !prevState.isLoggedIn
}))

或在函数中明确定义返回：

this.setState((prevState) => {
    return {
        isLoggedIn: !prevState.isLoggedIn
    };
})

通常内联箭头函数的规则是，如果第一个标记是一个开放的花括号，那么就是打开函数体。如果第一个标记不是左花括号，那么这是产生返回值的操作的开始。

---

顺便说一句，在这种情况下，点击处理程序本身中的 return 是多余的。总的来说，处理函数应该是：

handleClick(){
    this.setState((prevState) => ({
        isLoggedIn: !prevState.isLoggedIn
    }));
}