React组件onChange调用setState报错：TypeError: this.setState is not a function

帮你排查了下代码里的问题，主要是两个细节出错导致了当前的异常，咱们一步步来解决：

1. 控制台打印ValorState始终为undefined的原因 #

你在onChange和render方法里直接写this.ValorState是错误的写法——React组件的所有状态都存储在this.state对象中，正确的访问方式应该是this.state.ValorState，这就是你一直看到undefined的核心原因。

另外要注意：setState是异步操作，调用this.setState后立即打印状态，拿到的还是更新前的旧值。如果要查看更新后的最新状态，需要用setState的第二个回调参数：

this.setState({ValorState: value}, () => {
  console.log("New value onchange", this.state.ValorState);
});

2. TypeError: this.setState is not a function的解决方法 #

虽然你在constructor里手动绑定了onChange等方法，但有时候高阶组件（比如你用的connect）可能会干扰this指向。更稳妥的写法是用箭头函数定义类方法，它会自动把this绑定到组件实例上，完全避免手动绑定的麻烦：

onChange = (value) => {
  // 这里的this肯定指向组件实例，不会出错
}

修改后的完整代码 #

import React, { Component } from 'react';
import { Select } from 'antd';
import { connect } from "react-redux";

class SelecionarCrypto extends Component {
  constructor(props) {
    super(props);
    console.log(this.props);
    this.state = {
      ValorState: "nada"
    };
  };

  // 用箭头函数定义方法，自动绑定this
  onChange = (value) => {
    console.log(`selected ${value}`);
    this.setState({ValorState: value}, () => {
      // 在回调里打印更新后的状态
      console.log("New value onchange", this.state.ValorState);
    });
  }

  onBlur = () => {
    console.log('blur');
  }

  onFocus = () => {
    console.log('focus');
  }

  onSearch = (val) => {
    console.log('search:', val);
  }

  render(){
    const { Option } = Select;
    // 正确访问state中的状态
    console.log("New value Render", this.state.ValorState);
    return (
      <Select
        showSearch
        style={{ width: 200 }}
        placeholder="Seleciona:"
        optionFilterProp="children"
        onChange={this.onChange}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        onSearch={this.onSearch}
        filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 }
      >
        <Option value="ETH">ETH</Option>
        <Option value="BTC">BTC</Option>
        <Option value="XRP">XRP</Option>
      </Select>
    );
  }
}

const mapStateToProps = state => {
  return { token: state.token };
};

export default connect(mapStateToProps)(SelecionarCrypto);

这样修改后，你应该能正常更新状态，控制台也会输出正确的状态值，同时this.setState is not a function的报错也会消失。

内容的提问来源于stack exchange，提问作者Kentron.dna