React条件渲染实现登录登出切换无报错但功能失效问题求助

问题原因 #

你代码的核心问题是setState的更新函数返回值写法不符合JS语法规则：
当箭头函数直接返回对象字面量时，如果没有用小括号包裹对象，JS引擎会把对象外侧的{}识别为函数体的块作用域标记，你写的isLoggedIn: !prevState.isLoggedIn会被判定为合法的JS标签语句，不会被当作对象的属性返回，因此state没有被更新，也不会抛出语法错误。

此外handleClick方法不需要额外return setState的执行结果。

修复方案 #

你可以任选以下任意一种写法修改handleClick方法即可：

方案1：用小括号包裹要返回的state对象（推荐） #

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

方案2：在函数体内显式return对象 #

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

修改后点击按钮就可以正常切换登录登出状态了。

内容的提问来源于stack exchange，提问作者user14925601