2016-07-26 4 views
0

Ich verwende React Select und aus irgendeinem Grund ändert sich mein Zustand nur, nachdem eine Option zweimal ausgewählt wurde.React Prop nur ändert den Zustand nach zweimaliger Auswahl

Ich habe den folgenden Code:

var React = require('react'); 
import Select from 'react-select'; 

class VehicleSelect extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { brandSelect: ""}; 

    } 

    _onChange(value) { 
    //console.log(value) - just to see what we recive from <Select /> 
    this.setState({brandSelect: value}); 
    console.log(this.state.brandSelect); 
    } 

    render() { 
    var options = [ 
    { value: 'Volkswagen', label: 'Volkswagen' }, 
    { value: 'SEAT', label: 'SEAT' }, 
    { value: 'SKODA', label: 'SKODA' } 
    ]; 


    return (
     <Select 
      name="form-field-name" 
      value={this.state.brandSelect} 
      options={options} 
      placeholder="Select a brand" 
      searchable={false} 
      onChange={this._onChange.bind(this)} 
     /> 
    ) 
    } 
}; 

// Export our component 
export default VehicleSelect; 

Wenn eine der Optionen ausgewählt ist, wird es nicht console.log der neue Staat aber wenn ich die Möglichkeit, wieder wählen wird es. Irgendeine Idee, wo ich falsch liege, vermute ich, weil der Zustand nicht in der console.log angezeigt wird, es wird nicht aktualisiert?

Dank

Antwort

5

setState Zustand nicht sofort ändern. Sie müssen einen Rückruf verwenden. Docs.

_onChange(value) { 
    //console.log(value) - just to see what we recive from <Select /> 
    this.setState({brandSelect: value},() => { 
     console.log(this.state.brandSelect); 
    }); 
    }