条件渲染的问题

Question

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

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

class App extends React.Component{
    
    constructor(){
        super()
        this.state = {
            isLoggedIn: false
        }
        this.handleClick = this.handleClick.bind(this)
    }
    
    handleClick(){
        return(
            this.setState((prevState) => {
                isLoggedIn: !prevState.isLoggedIn
            })
        )
    }
    
    
    render(){
        return(
            <div>
                <h1>You Logged {this.state.isLoggedIn ? "In" : "Out"}</h1>
                <button style={{cursor:" pointer"}} onClick={this.handleClick}>Login {this.state.isLoggedIn ? "Out": "In"}</button>
            </div>
        )
    }
}

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
    }));
}