反应下拉菜单未显示所选元素

Question

我是 React 的初学者。 In the code below I'm basically reading data from a db using flask api and returning data based on the option selected from a Dynamic dropdown list which also picks options to display from another flask api.

import React, {Component} from 'react'
import axios from 'axios';
import Select from 'react-select';

class ListUser extends Component{


  constructor(props){
    super(props)

    this.state={
        userList:[],
        selected_eml:[],
        selected_email:'',
        user_list:[]
    }
  }

  componentDidMount(){

        axios.get('/getuserList',{crossDomain: true})
          .then(response => {
              if (response.status === 200 && response != null){
                console.log("user list",response.data)
                  this.setState({ userList : response.data,selected_eml:response.data});
                }
            })
  }        

  selectedUserHandler(event){
    this.setState({selected_eml: event.label})
    let email = event.value
    axios.get('/getUserlisting/'+email).then(response=>{
      if (response.status === 200 && response != null){
        this.setState({ user_list : response.data });
        console.log(response.data)
      } else {console.log("error")}
    })
   } 

componentDidUpdate(){
    let email = this.state.selected_eml
    axios.get('/getUserlisting/'+email).then(response=>{
      if (response.status === 200 && response != null){
        if(JSON.stringify(this.state.user_list) != JSON.stringify(response.data)){
        this.setState({ user_list : response.data, selected_email:response.data });
        console.log(response.data)
      }
      } else {console.log("error")}
    }) 
  }    

  render(){
    var filter_user_list=[]

    for (var key in this.state.selected_eml) {
            console.log(this.state.selected_eml[key]['value'])
            filter_user_list.push(this.state.selected_eml[key]['value'])
          }
          console.log(filter_user_list)

    return(
    <div>
      <div className="App">
        <table><tbody>
                  <tr>
                    <th ><label> Email </label></th>
                     <td style= {{ width:"300px"}}>
                      <Select
                        placeholder= "Select User Email"
                        options={this.state.userList} value={this.state.selected_eml}
                        onChange={this.selectedUserHandler.bind(this)}
                       />
                      </td>
                  </tr>
          </tbody></table>
        </div>
        <br />
        <br />
        <div>
          <h4 align="center">User List</h4>
          <table className="table table-striped" style={{ marginTop: 10, border : 1 }} >
            <thead>
              <tr>
                <th>User ID</th>
                <th>Email</th>
                <th>P ID</th>
                <th>P Name</th>
              </tr>
            </thead>
            <tbody align="center">
             { this.state.user_list.map((mp, index)=><tr>
                <td> {mp.user_id} </td>
                <td> {mp.email} </td>
                <td> {mp.id} </td>
                <td> {mp.name} </td>
              </tr>) }
            </tbody>
          </table>
        </div>
        </div>
      )

    }
}    

export default ListUser;

我面临的问题是，当我从下拉列表中选择 select 时，它可以正常返回数据，但不显示在下拉占位符栏中选择的选项。 我尝试在selectedUserHandler function 中将selected_eml与bind(this)一起传递给onChange和getOption方法，但没有成功。

此外，如果有任何方法可以使代码更高效并提高质量，欢迎输入。

Answer 1

the selected value for the Select needs to have this object format of {value: sth, label: sth} in order to be displayed in the select container. 由于您已将event.label分配给 selected_eml，因此它不会显示在 select 容器中。 要解决这个问题，你只需要这样做： this.setState({selected_eml: event})