ReactJSのsetStateと選択ドロップダウンの混乱

Question

ReactのsetStateで誤って順序付けられたレスポンスが使用されています。以前に選択したオプションの価値を私に与えてくれました。最初に何かを選択すると、それは空白になりますが、2番目の選択で前に選択したものが私に与えられます。

ので、最初のピック：「グリーン」の結果 セカンドピックを空にする：「赤」は結果

として私に「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> 
    ) 
    } 
}; 

Answer 1

this.setState()は状態を非同期的に変更する。つまり、少し遅れて値が実際に変更されます。コンパイルされたアップデート後にstateに中継しているときは、通常は問題ありません。しかし、あなたはすぐに新しい価値を取り戻そうとしています。この時点でまだstateにこの値がないため、これは機能しません。あなたの特別な場合には2つの方法があります。

最初の方法。 expressValue機能状態値の代わりに自分の原点値を使用します。

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

第二の方法を。たとえば、stateが変更されたときに、renderメソッドのようにコンポーネントが更新された後にメッセージを表示します。

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

Answer 2

ローマのは、右のそれを得たが、私はまた何かを指摘したかった：

this.changeHandlerは、自分のメインで定義されていないコンポーネントを反応させます。それがあったとしても、あなたはそれを縛らなかった（これ）。

this.changeHandler = this.changeHandler; 

へ：あなたのコンストラクタで

は、ライン変更

this.changeHandler = this.changeHandler.bind(this); 

を、あなたがexpressValueをしたとして、あなたはその名前の関数を定義します（）。