ReactJS：修改输入值后state属性变为undefined的问题排查

别着急，这种情况我碰到过好多次，大概率是几个基础细节没注意到，我给你列几个最常见的原因，你对照自己的代码看看：

• this的指向不对
  如果你是在事件处理函数（比如输入框的onChange）里调用setState，很可能是this没有绑定到组件实例上。比如直接写：

  <input onChange={this.handleInputChange} />
  

  这种情况下函数里的this不是组件实例，调用this.setState自然出问题。解决办法有三个：

  1. 构造函数里绑定this：

     constructor(props) {
       super(props);
       this.handleInputChange = this.handleInputChange.bind(this);
     }
     

  2. 使用箭头函数定义事件处理函数：

     handleInputChange = (e) => {
       this.setState({ username: e.target.value });
     }
     

  3. 在onChange里直接用箭头函数：

     <input onChange={(e) => this.handleInputChange(e)} />
     

• setState的参数格式错误
  如果你给setState传了一个undefined的对象，或者更新逻辑里写错了属性名，就会导致对应state变成undefined。比如：

  // 错误：如果newUsername是undefined，就会把username设为undefined
  this.setState({ username: newUsername });
  
  // 或者不小心拼错了属性名，比如把username写成了userName（和初始state的键名不一致）
  this.setState({ userName: e.target.value });
  

  检查下你更新state时用的属性名是不是和初始state里的完全一致，还有要确保赋值的变量不是undefined。

• 异步更新的误解
  this.setState是异步的，如果你在调用setState之后立刻去打印this.state，看到的还是旧值，可能会误以为setState没生效。比如：

  this.setState({ username: 'newName' });
  console.log(this.state.username); // 这里打印的还是旧值，不是newName
  

  如果要确认state是否真的更新了，要么在componentDidUpdate里检查，要么给setState传第二个参数（回调函数）：

  this.setState({ username: 'newName' }, () => {
    console.log(this.state.username); // 这里能拿到更新后的值
  });
  

• 初始state没有正确初始化
  如果你的初始state里根本没定义username或password这两个属性，第一次更新的时候可能会出现undefined的情况。比如初始state是：

  state = {};
  

  而不是：

  state = {
    username: '',
    password: ''
  };
  

  这种情况下第一次设置state虽然能生效，但如果逻辑里依赖初始值的话，可能会出现异常。

你可以先从这几个方向排查一下，应该能找到问题所在～

内容的提问来源于stack exchange，提问作者Ole EH Dufour