React类组件修改state时出现未知错误，按钮无法正常显示状态值如何解决？

错误原因 #

• 调用setState时变量引用错误：代码中this.setState({loggedIn:!loggedIn})里的loggedIn未在当前作用域声明，需要从组件实例的state中读取，改为!this.state.loggedIn即可。
• JSX不支持直接渲染布尔值：直接在按钮内写{this.state.loggedIn}时，React会自动忽略布尔、null、undefined类型的值，所以按钮无法展示对应的状态文本，需要先转为字符串或自定义展示文案。
• （优化建议）不要将事件处理函数定义在render方法内，否则每次组件重新渲染都会重复创建函数实例，建议抽离为类的原型方法。

修正后完整代码 #

class App extends React.Component {
    constructor(){
        super()
        this.state={
            loggedIn:true
        }
        // 绑定方法的this指向
        this.toggleLoginStatus = this.toggleLoginStatus.bind(this)
    }
    // 抽离事件处理函数
    toggleLoginStatus() {
        this.setState({loggedIn: !this.state.loggedIn})
    }
    render(){
        return (
            <div>
                <button onClick={this.toggleLoginStatus}>
                    {/* 如需更友好的展示，可替换为 {this.state.loggedIn ? '退出登录' : '立即登录'} */}
                    {String(this.state.loggedIn)}
                </button>
            </div>
        )
    }
}

export default App

如果需要按钮展示更符合业务场景的文案，只需要把{String(this.state.loggedIn)}替换为三元表达式输出对应文案即可，点击按钮就会正常切换登录状态。

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