Question

class Card extends Component {
  state = {
    toggled: false
  };
  onClick() {
    this.setState({ toggled: !this.state.toggled });
  }
  render() {
    return (
      <div>
        {this.state.toggled && <p>Hello World </p>}
        <button onClick={this.onClick}>Toggle Card</button>
      </div>
    );
  }
}

我有一个简单的按钮，可以切换状态并呈现一个<p>标签，我得到的错误代码为

TypeError：无法读取未定义的属性'setState'

按下按钮时

Answer 1

您需要绑定功能。

尝试一下：

  onClick = () => {
    this.setState({ toggled: !this.state.toggled });
  }

您需要箭头功能，因为您要访问this属性，该属性引用当前类。

箭头函数意味着this不会引用函数的上下文，而是引用类的上下文。

另一种选择是将函数绑定到构造函数中

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

Answer 2

在bind上点击constructor或将方法转换为箭头功能。

onClick = () => {
    this.setState({ toggled: !this.state.toggled });
}

React无法读取未定义的属性“ setState”

2 个答案: