React Redux Field <option>具有旧的选定值onChange

Question

我有一个使用Field和<option>的react下拉框。我的问题是如果我从此下拉列表中选择了一个值，例如99.7％，只要函数handleChange的sla状态发生变化，此sla列表就会刷新，即handleChange将调用axios api并获得json响应

0: {sla: "Select the SLA/SLG ..."}
1: {sla: "SLA 99.7%"}
2: {sla: "SLG 99.9%"}
3: {sla: "SLG 99.99%"}

，但出现的第一个值将不是“ Choose a称呼...”，而是由我之前选择的任何值替换，即在这种情况下为99.7％。我只希望在调用handleChange的任何时候都将其默认设置为“选择称呼...”。

我尝试在刷新之前this.setState({sla: []})进行handleChange操作，但无济于事。

 handleChange = (e, { type, name, value }) => {

    let userSelected = e.target.value

    if (e.target.value === 'Select Number of users ...') {
      this.setState({ ha: [] })
      this.setState({ sla: [] })
      this.setState({ bf: [] })
      this.setState({ pkg: [] })
      this.setState({ otcmrc: [] })
      this.setState({ contractTotal: '' })
    }
    else {
      this.setState({ ha: [] })
      this.setState({ sla: [] })
      this.slaSelected = null
      this.setState({ bf: [] })
      this.setState({ pkg: [] })
      this.setState({ slaState: null })
      this.setState({ otcmrc: [] })
      this.mrcSelected = 0
      this.otcSelected = 0
      this.setState({ contractTotal: '' })
      this.setState({ userState: userSelected })
      this.userSelect = e.target.value
      const url = `http://localhost:8080/getSLA/${userSelected}`;
      const headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET,POST'
      };
      axios.get(url, { headers }).then(response => response.data.responseData)
        .then((data) => {
          this.setState({ sla: data })
          console.log(this.state.sla)
        })

      this.getAndCalculate()
    }
  }    

<label>Number of users:</label>
        <Field id={"Users" + this.props.key_passin} ref={"Users" + this.props.key_passin} name={"Users" + this.props.key_passin} component="select" onChange={this.handleChange}>

          {this.state.users.map(user => (
            <option value={user.users} key={user.users}>
              {user.users}
            </option>
          ))}

        </Field>

        <label>SLA/SLG:</label>
        <Field name={"SLA" + this.props.key_passin} component="select" onChange={this.handleChangeSla}> 
        <option value="Choose a salutation ...">Choose a salutation ...</option>
          {this.state.sla.map((slas, i) => (

            <option value={slas.sla} key={i} selected=''>
              {slas.sla}
            </option>
          ))}

        </Field>