React组件点击切换className报错：无法读取null属性，求解决方案

• 核心问题：直接修改state
  React类组件中禁止直接赋值修改this.state，必须通过this.setState()方法更新状态。直接修改state不会触发组件重新渲染，还会导致状态管理异常，这也是你遇到‘无法读取null的属性’错误的主要原因。

• 修复后的完整代码

export default class Dimension extends Component {
  constructor(props){
    super(props)
    this.state ={
      click : false
    }
  }

  render() {
    return (
      <div className='scroll-container'>
        <div 
          className={this.state.click ? 'circle-one' : "circle"} 
          id='circle-one'  
          onClick={() => {
            // 使用setState更新状态，基于前一次状态做修改
            this.setState(prevState => ({
              click: !prevState.click
            }), () => {
              // 状态更新完成后再执行打印（可选）
              console.log(this.state.click)
            })
          }}
        ></div>
      </div>
    )
  }
}

• 关键细节说明
  • 用this.setState()的函数式更新（接收prevState参数），能确保每次状态更新都是基于最新的状态值，避免异步更新带来的状态不一致问题。
  • setState是异步操作，如果需要在状态更新后执行逻辑（比如打印最新状态），要放在它的第二个回调函数里，直接在后面打印会拿到旧的状态值。

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