如何修复"react-dom.development.js:287未捕获的类型错误：无法读取未定义的属性'setState'"[重复]

Question

我正在尝试将我的react表单上载到状态，以便获取具有这些凭据的API

我尝试创建一个如下所示的函数：

handleEmail(event) {
    this.setState({email: event.target.value});
  }
  handlePassword(event) {
    this.setState({password: event.target.value});
  }
  render() {
    return (
      <div>
        <NavBar />
        <form className="pt-6 container">
          <div className="form-group">
            <label className="mt-6" >Your email</label>
            <input name className="form-control" onChange={this.handleEmail} placeholder="Email" type="email" />
          </div> {/* form-group// */}
          <div className="form-group">
            <a className="float-right" href="#">Forgot?</a>
            <label>Your password</label>
            <input className="form-control" onChange={this.handlePassword} placeholder="******" type="password" />
          </div> {/* form-group// */}

Answer 1

您需要绑定函数，添加如下构造函数：

constructor(props) {
    super(props);
    this.state = {
        email: '',
        password:''
    };

    this.handleEmail= this.handleEmail.bind(this);
    this.handlePassword= this.handlePassword.bind(this);
}

Answer 2

这是一个范围问题。因为这些方法是在事件触发器之后调用的，所以this指向调用它的作用域，而不是指向定义它的类实例。
您需要使用箭头函数来解决这个问题。

handleEmail = (event) => {
    this.setState({email: event.target.value});
  }
  handlePassword = (event) => {
    this.setState({password: event.target.value});
  }