React登录/登出状态不生效，构造函数实现模拟功能出错求助

嘿，我帮你检查了这段代码，发现了一个典型的小语法问题，咱们来拆解一下：

错误点：对象字面量的赋值语法错误 #

在构造函数初始化state的时候，你写了：

this.state = { isLoggedIn = true }

JavaScript的对象字面量里，键和值之间需要用**冒号(:)**来关联，而不是等号(=)。这个等号会直接导致语法错误，让组件无法正常编译运行。

修正后的代码 #

把等号换成冒号就可以解决问题了，修正后的完整代码如下：

import React from "react"
class App extends React.Component {
  constructor() {
    super()
    this.state = { isLoggedIn: true } // 这里把=改成了:
  }
  render(){
    return (
      <div>
        <h1>You are currently logged {this.state.isLoggedIn ? 'In' : 'Out'}</h1>
      </div>
    )
  }
}
export default App

额外小提示 #

其实在现代React的类组件中，你可以省略constructor，直接用类字段的方式初始化state，代码会更简洁：

import React from "react"
class App extends React.Component {
  state = { isLoggedIn: true } // 直接初始化state，无需constructor和super
  render(){
    return (
      <div>
        <h1>You are currently logged {this.state.isLoggedIn ? 'In' : 'Out'}</h1>
      </div>
    )
  }
}
export default App

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