React点击按钮切换/toggle state失效问题排查与正确实现方法

你的代码一共有4个直接导致功能失效的错误：

• 按钮onClick绑定逻辑完全错误：当前绑定的箭头函数里尝试调用this.workFromOffice()，但workFromOffice是state里的布尔值，不是组件方法，直接调用会抛错；且这个函数仅返回了'Home'/'Office'字符串，完全没有调用setState更新状态，自然无法触发视图刷新。
• 渲染字段不匹配：state中定义的状态字段是workFromOffice，但p标签中读取的是不存在的this.state.work，永远拿不到正确的状态值。
• 你原本写好的、包含正确状态更新逻辑的changeMyWorkPlace方法被注释掉了，按钮没有绑定这个有效方法。
• JSX语法不规范：React中要使用className代替原生HTML的class属性，否则控制台会持续抛出警告。

完全可以。if本身就是做条件分支判断的，你完全可以在状态更新方法里通过if判断当前状态，再设置对应的值，示例代码如下：

changeMyWorkPlace(){
  if (this.state.workFromOffice) {
    this.setState({ workFromOffice: false })
  } else {
    this.setState({ workFromOffice: true })
  }
}

这种写法和布尔值取反的效果完全一致，只是代码行数稍多。

不需要写冗余的if分支，直接利用布尔值取反的特性做状态切换即可，同时注意setState依赖旧状态时，优先使用函数式更新避免React批量更新带来的状态不同步问题，修正后的完整可运行代码：

import React, { Component } from 'react';
import './ChangeSchedule.css';
class ChangeSchedule extends Component {
  constructor(){
    super()
    this.state = {
      workFromOffice: true
    }
    // 绑定方法this指向
    this.changeMyWorkPlace = this.changeMyWorkPlace.bind(this)
  }

  changeMyWorkPlace(){
    // 函数式更新，基于上一次的状态取反，是最简洁可靠的写法
    this.setState(prevState => ({
      workFromOffice: !prevState.workFromOffice
    }))
  }

  render(){
    return(
      <div>
        <div className="schedule change">
          <h3>Employee Name: </h3>
          <p>Today Pooja is working {this.state.workFromOffice ? 'Work From Office' : 'Work From Home'}</p>
          <button className="chageScheduleBtn" onClick={this.changeMyWorkPlace}>
            Change My Schedule
          </button>
        </div>
      </div>
    )
  }
}

export default ChangeSchedule;

小提示：如果不想手动在constructor里绑定this，也可以把changeMyWorkPlace写成类字段箭头函数，React会自动绑定当前组件实例的this。

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