Javascript 如何在React中记录prevState和原始状态？

我有一个从真到假的切换开关

flipSwitch = () => {
    console.log(this.state)
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }))
  }

一切都正常工作，但我想同时记录prevState和原始状态。我在下面尝试在设置prevState后添加一个回调函数，但它打破了我的切换开关

flipSwitch = () => {
    console.log(this.state)
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }, () => console.log(prevState)))
  }

---

你在这里想做的不正确

flipSwitch = () => {
    console.log(this.state)
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }, () => console.log(prevState)))
  }

您将无法访问setState第二个参数中的

prevState

您应该像这样修改

setState

函数

flipSwitch = () => {
    console.log(this.state) // this refers to previous state here
    this.setState(prevState => {
      console.log(prevState) // prevState refers to previous state
      return ({
        isToggleOn: !prevState.isToggleOn
      })
    }, () => console.log(this.state) // here this refers to updated state)
  }

你可以试试

import React from "react";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isToggleOn: false
    };
  }
  flipSwitch = () => {
    console.log(this.state);
    this.setState(
      prevState => {
        console.log("prevState", prevState);
        return {
          isToggleOn: !prevState.isToggleOn
        };
      },
      () => {
        console.log("setState Callback", this.state);
      }
    );
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.flipSwitch}>
          {this.state.isToggleOn ? "Flipped" : "Flip Switch!"}
        </button>
      </div>
    );
  }
}

export default App;

从“React”导入React；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
isToggleOn:错
};
}
翻转开关=（）=>{
console.log（this.state）；
这是我的国家(
prevState=>{
console.log（“prevState”，prevState）；
返回{
isToggleOn:！prevState.isToggleOn
};
},
() => {
log（“setState回调”，this.state）；
}
);
};
render（）{
返回(
{this.state.isToggleOn？“翻转”：“翻转开关！”}
);
}
}
导出默认应用程序；