Question

老实说，这是我在ReactJS中的第一天。我正在学习诸如state之类的小事。我为切换按钮创建了一个小程序。它只会显示“ Hello world！”或在切换按钮时不显示任何内容。我不明白一件事。使用以下语法时，我的代码给我一个错误：

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

此状态未定义

但是如果我将语法更改为粗箭头功能，则相同的代码可以完美地工作：

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

我不会浪费你的时间。我创建了一个stackblitz。互联网上的专家说，对this.setState()的任何调用都是异步的。因此，我尝试使用call back function和IIFE，但使自己更加困惑和过于复杂。请纠正我。抱歉，这是一个非常幼稚的问题。

Answer 1

有两种方法。

一种是在构造函数中添加。 ES6 React.Component不会自动将方法绑定到自身。您需要将它们自己绑定到构造函数中。像这样

this.toggleHandler = this.toggleHandler.bind(this);

另一个是箭头功能toggleHandler = (event) => {...}.

然后是onClick={this.toggleHandler.bind(this)}

Answer 2

是的，任何setState调用都是异步的。您可以检查日志以确认其状态已更改，但无法操作dom。为了操纵dom任何异步调用都应通过回调函数进行。

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

Answer 3

错误消息告诉您this对象不包含名为state的属性。 this确切地指的是JS中不断引起混乱的原因，除非在箭头函数中。在箭头函数中，this始终指箭头函数出现的上下文。

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

要解决此问题，您可以使用bind（它会输出函数的副本，并且上下文设置为您提供的内容。或者仅使用箭头函数。如果是我，我会选择后者因为this在箭头函数中具有更好的定义和更一致的行为，所以如果您想使用bind，则可以在事件处理程序声明中执行以下操作：

onClick={this.toggleHandler.bind(this)}

Answer 4

使用功能和先前状态的方式。

1-在构造函数中绑定

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

可以这样定义

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

2-箭头功能（无需在构造函数中绑定）

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

3-内联绑定

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

功能代码

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

4-内联箭头功能

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

功能代码

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

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