Jquery ReactJS'；s设置与选择下拉列表的状态混淆

我在React的setState中得到了一个顺序错误的响应，我使用了一个select下拉列表。它给了我以前选择的选项的值。当我第一次选择某个内容时，它显示为空白，但第二次选择将显示我以前选择的内容

所以，首先选择：“绿色”结果为空 第二个选择：“红色”会给我“gre”

我知道我遗漏了什么，也许我没有正确地绑定它

class Main extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
          typeValue: ''
        }
     this.changeHandler = this.changeHandler;
     this.expressValue = this.expressValue.bind(this);
    }

    expressValue(e) {
       this.setState({
           typeValue : e.target.value
       });
       console.log('this type val state is: ' + this.state.typeValue);
    }

    render() {
         return (
            <div>
                <TypeSelect changeHandler={this.expressValue} />
            </div>
         )
    }
};

class TypeSelect extends React.Component {
   constructor(props) {
      super(props);
   }

   render() {
        let options = {
           'default': 'Choose a category',
           'red': 'Red',
           'blu': 'Blue',
           'gre': 'Green',
         }
       return (
            <select name="name_type" id="name_type" onChange={this.props.changeHandler}>
            {
                  Object.keys(options).map(function(key){
                   return (
                       <option key={key} value={key}>{options[key]}</option>
                     )
                 })
               }
           </select>
     )
   }
};

类主扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
类型值：“”
}
this.changeHandler=this.changeHandler；
this.expressValue=this.expressValue.bind（this）；
}
expressValue（e）{
这是我的国家({
typeValue:e.target.value
});
console.log（'此类型val状态为：'+此.state.typeValue）；
}
render（）{
返回(
)
}
};
类TypeSelect扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
让选项={
“默认设置”：“选择类别”，
“红色”：“红色”，
‘蓝色’：‘蓝色’，
“gre”：“Green”，
}
返回(
{
对象。键（选项）。映射（函数（键）{
返回(
{选项[键]}
)
})
}
)
}
};

此.setState（）

异步更改状态。这意味着，该值将随着一点延迟而真正改变。通常情况下，当您在组件更新后中继

状态时，这不是问题。但在这里，您试图立即获取一个新值。这将不起作用，因为此时您仍然没有处于
状态的此值。在您的特殊情况下，有两种方法

第一种方式。在
expressValue
函数中使用原始值而不是状态值：

expressValue(e) {
   this.setState({
       typeValue : e.target.value
   });
   console.log('this type val state is: ' + e.target.value);
}

第二种方式。在组件更新后显示消息，例如，在
render
方法中，每当
状态发生更改时，它都会调用该方法

render() {
     console.log('this type val state is: ' + this.state.typeValue );
     return (
        <div>
            <TypeSelect changeHandler={this.expressValue} />
        </div>
     )
}

render（）{
console.log（'此类型的val状态为：'+this.state.typeValue）；
返回(
)
}
罗曼说得对，但我还想指出一些其他问题：

未在主react组件中定义this.changeHandler。即使是，你也没有把它绑在（这个）上面

在构造函数中，更改行：

this.changeHandler = this.changeHandler;

致：

然后，您可以像expressValue（）一样使用该名称定义函数。
绑定
changeHandler
给了我一个
uncaughttypeerror错误：无法读取未定义的属性“bind”
它将在您编写函数后定义。所以在expressValue（e）{…，如果您编写了'changeHandler（e）{console.log（e）}；，this.changeHandler将不再是未定义的。对不起，我在该组件中根本看不到该函数，也看不到它在任何地方的用法。您可以删除这一行，它是无用的。
changeHandler
用作onClick函数的props引用，我不确定是否遵循。当您将函数作为props传递给组件时（使用es6类构造函数，您是），需要将该函数绑定到它起源的组件（通常在构造函数（）方法中完成）。但是，如果不实际编写该函数，[functionName]是未定义的，您不能调用bind（）未定义。这是一个非常常见的错误，并且许多人在调试时遇到困难。在您的示例中，This.changeHandler未定义，然后您将其值设置为未定义。幸运的是，您实际上没有这样做
this.changeHandler = this.changeHandler.bind(this);