React中setState无法修改组件状态的问题求助

你的代码逻辑本身没有错误，问题出在**React开发环境的严格模式（Strict Mode）**上。

在开发环境下，React严格模式会重复调用setState的更新器函数（也就是你传入的第一个箭头函数），目的是检测代码中是否存在潜在的副作用。你的更新器函数是(state) => {return {toggle: !state.toggle}}，每次调用都会把toggle取反：

• 第一次调用：true → false
• 第二次调用（严格模式触发）：false → true

两次取反后，toggle又回到了初始的true，所以你看到控制台输出的toggle after还是true，页面也显示true。

验证与解决 #

1. 临时验证：找到项目入口文件（通常是index.js），去掉包裹<App/>的<React.StrictMode>标签，重新运行代码，你会看到toggle成功变为false，控制台输出toggle after: false。
2. 生产环境说明：严格模式仅在开发环境生效，生产环境下不会出现这种重复调用的情况，你的代码在生产环境会正常工作。
3. 开发环境适配：如果希望在开发环境也能正常看到效果，可以给组件加一个标记，避免重复执行更新：

componentDidMount() {
  if (!this.hasUpdated) {
    this.hasUpdated = true;
    console.log('toggle before: ' + this.state.toggle);
    this.setState((state) => {
      return {toggle: !state.toggle}
    }, () => console.log('toggle after: ' + this.state.toggle));
  }
}

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