Javascript 在React中设置状态的正确方法是什么

老实说，这是我在ReactJS的第一天。我正在学习一些小东西，比如

state

。我为切换按钮创建了一个小程序。它将只显示“Hello world！”或在切换按钮时不显示任何内容。有一件事我不明白。我的代码在使用此语法时出错：

  toggleHandler() {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

此.state未定义

但是，如果我将语法更改为fat arrow函数，同样的代码也可以完美地工作：

  toggleHandler=()=> {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

---

我不会浪费你的时间。我创造了一个新的世界。互联网专家表示，对

this.setState（）

的任何调用都是异步的。所以我试着使用

回调函数

和

iLife

，但让自己更加困惑和复杂。请纠正我。很抱歉，这是一个非常幼稚的问题。

是的，任何setState调用都是异步的。您可以检查日志以确定它是否更改了他的状态，但不能操纵dom。为了操作dom，任何异步调用都应该通过回调函数进行

---

您可以使用此箭头函数或此.state.bind（this）绑定任何状态。

有几种方法。

一个是添加构造函数ES6反应。组件不会自动将方法绑定到自身。您需要自己在构造函数中绑定它们。像这样

this.toggleHandler=this.toggleHandler.bind（this）

另一个是箭头函数
toggleHandler=（事件）=>{…}。

然后是
onClick={this.toggleHandler.bind（this）}

错误消息告诉您的是，
此
对象不包含名为
状态的属性。这个
所指的东西在JS中是一个经常引起混淆的来源，除了在arrow函数中。在箭头函数中，
此
始终指箭头函数出现的上下文

这里的问题在第一个示例中，
this
指的是onClick事件发送给处理程序的上下文。此上下文不包含
状态
属性。但是，在arrow函数中，
this
关键字将引用arrow函数所在的JavaScript类。此类确实具有
状态
属性

要解决此问题，可以使用
bind
（它将输出函数的副本，并将上下文设置为您提供给它的任何内容。或者只使用箭头函数。如果是我，我将采用后一种方法，因为
此
在箭头函数中具有更好的定义和更一致的行为。如果确实要使用
绑定
，则可以在事件处理程序d中执行此操作诸如此类的赞扬：

onClick={this.toggleHandler.bind（this）}
使用函数和先前状态的方式

1-构造函数中的绑定

constructor() {
    this.toggleHandler=this.toggleHandler.bind(this);
  }

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

可以这样定义吗

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

2-箭头函数（不需要在构造函数中绑定）

3-内联绑定

<Button onClick={this.toggleHandler.bind(this)}>Toggle</Button>

4-内联箭头函数

 <Button onClick={()=>this.toggleHandler()}>Toggle</Button>

注意-建议避免使用内联函数以获得更好的性能

我想这会对你有帮助
 <Button onClick={()=>this.toggleHandler()}>Toggle</Button>

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }