React prop меняет состояние только после двойного выбора

Я использую React Select, и по какой-то причине мое состояние меняется только после того, как параметр был выбран дважды .

У меня такой код:

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;

Когда выбрана одна из опций, она не console.log новое состояние, однако, если я выберу опцию снова, это произойдет. Любая идея, где я ошибаюсь, я предполагаю, потому что состояние не отображается в console.log, оно не обновляется?

Спасибо


reactjs react-select
person Nick Maddren    schedule 26.07.2016    source источник

Ответы (1)


arrow_upward
5
arrow_downward

setState не меняет состояние сразу. Вам нужно использовать обратный вызов. Документы.

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