React中addProduct函数报错：this.state.selectValue未定义问题排查

你碰到的这个问题其实是React组件里非常常见的上下文绑定问题——addProduct函数内部的this并没有指向你的组件实例，而是变成了undefined，自然就没法读取this.state.selectValue了。

你已经注意到handleSelectChange通过.bind(this)绑定了上下文，所以它能正常访问this.state，但addProduct在绑定onClick的时候没做同样的处理，这就是问题的核心。下面给你几种常用的解决办法：

方法一：在事件绑定处直接使用.bind(this) #

直接修改Button的onClick属性，把this绑定到addProduct函数上：

<Button color="primary" onClick={this.addProduct.bind(this)}>Add</Button>

这种方式和你处理handleSelectChange的逻辑一致，简单直接，适合快速解决问题。

方法二：在构造函数中提前绑定上下文 #

推荐这种方式，因为它只会在组件初始化时绑定一次，不会在每次渲染时创建新的函数实例，性能更友好：
首先在组件的构造函数里添加绑定逻辑：

constructor(props) {
  super(props);
  // 初始化你的state
  this.state = {
    selectValue: '',
    products: []
  };
  // 绑定两个函数的this到组件实例
  this.handleSelectChange = this.handleSelectChange.bind(this);
  this.addProduct = this.addProduct.bind(this);
}

之后事件绑定就可以简化成：

<Input type="select" value={this.state.selectValue} onChange={this.handleSelectChange} name="select" id="exampleSelect">
  {/* 你的option选项 */}
</Input>
<Button color="primary" onClick={this.addProduct}>Add</Button>

方法三：使用箭头函数定义组件方法 #

这是现在React社区比较流行的写法，箭头函数会自动捕获当前上下文的this，不需要手动绑定：
把你的两个函数改成箭头函数形式：

handleSelectChange = (e) => {
 console.log(e.target.value);
 this.setState({selectValue: e.target.value}, () => {
   // 注意：setState是异步的，要查看更新后的state需要用回调
   console.log(this.state.selectValue);
 });
}

addProduct = (e) => {
  console.log(this.state.selectValue);
  this.setState({products: [ ...this.state.products, this.state.selectValue]});
}

然后事件绑定直接写函数名即可：

<Input type="select" value={this.state.selectValue} onChange={this.handleSelectChange} name="select" id="exampleSelect">
  {/* 你的option选项 */}
</Input>
<Button color="primary" onClick={this.addProduct}>Add</Button>

顺便提个小细节：setState是异步更新state的，你之前在handleSelectChange里刚调用setState就立刻打印this.state.selectValue，其实拿到的是更新前的旧值。如果需要查看更新后的state，记得用setState的第二个回调参数，就像上面方法三里写的那样。

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