React组件报错：Uncaught TypeError: Cannot read properties of undefined (reading 'setState')

问题原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'setState')错误，本质是类组件中普通方法的this指向未绑定到组件实例。当onUsernameChange和onPasswordChange作为事件回调被调用时，方法内部的this默认是undefined（严格模式下），自然无法调用this.setState。而console.log(event.target.value)能正常打印，是因为event参数是直接传递的，和this无关。

三种解决方案 #

方案1：在构造函数中绑定this

修改组件的构造函数，手动将方法的this绑定到组件实例：

constructor() {
  super();
  this.state = {
    SignInuserName: "",
    SignInPassword: "",
  };
  // 绑定this
  this.onUsernameChange = this.onUsernameChange.bind(this);
  this.onPasswordChange = this.onPasswordChange.bind(this);
}

方案2：用箭头函数定义类方法

箭头函数会自动继承外层作用域的this，直接将onUsernameChange和onPasswordChange定义为箭头函数：

onUsernameChange = (event) => {
  console.log(event.target.value);
  this.setState({ SignInuserName: event.target.value });
}
onPasswordChange = (event) => {
  console.log(event.target.value);
  this.setState({ SignInPassword: event.target.value });
}

方案3：在事件绑定处使用箭头函数

在onChange属性中直接用箭头函数包裹方法调用，这样this会指向组件实例：

<input 
  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
  type="text"
  name="user-name"
  id="user-name"
  onChange={(event) => this.onUsernameChange(event)}
/>

<input 
  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
  type="password"
  name="password"
  id="password"
  onChange={(event) => this.onPasswordChange(event)}
/>

验证效果 #

采用任意一种方案后，输入内容会正常同步到this.state，点击Sign in按钮时，console.log(this.state)就能输出正确的用户名和密码值。

内容的提问来源于stack exchange，提问作者SHERAWAT LOKESH