反应选择值落后一步

如何解决反应选择值落后一步

我正在使用 react-select 并将值传递给后端节点脚本 - 但传递的值始终是选择框的前一个值 -

所以在这个例子中，当它加载并且我将下拉列表更改为 Lancaster 时，警报为空白。如果我然后选择伦敦，警报会显示兰开斯特，那么无论我选择什么，警报都会显示伦敦等。

有什么想法吗？

import React from 'react';
import axios from 'axios';
import Select from 'react-select';

export default class PersonList extends React.Component {


  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      cines: [],};
  }
  handleSubmit(c){  
      axios.get(`/api/groups/`,{
      params: {
        City: c
      }
    })
      .then(res => {
        const cines = res.data;
        this.setState({ cines });
      })
      .catch((err) => {
        console.log(err);
      })
    
  }
  handleChange = (event) => {   
    event.persist();
    this.setState({ value: event.target.value});
    alert(this.state.value);
    this.handleSubmit(this.state.value); 
  }
 

  render() {
    const { options,value } = this.state;
    return (
      <div>
        <select id="city"  value={this.state.value} onChange={this.handleChange.bind(this)}  >
        <option value="">City</option>
          <option value="Lancaster">Lancaster</option>
          <option value="London">London</option>
        </select>
              
        <ul>
          { this.state.cines.map(cine => <li>* {cine.Name}</li>)}
        </ul>
      </div>
    )
  }
}