React 下拉菜单不显示所选元素

Question

我是 React 的初学者。在下面的代码中，我基本上是使用 flask api 从数据库读取数据，并根据动态下拉列表中的选项 selected 返回数据，该列表还从另一个 flask [=22] 中选择要显示的选项=].

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 从下拉列表中选择一个选项时，它 returns 数据正常但没有在下拉列表中显示选项 selected占位符栏。我试过在 onChange 和 getOption 方法中传递 selectedUserHandler 函数中的 bind(this) 和 selected_eml，但没有成功。

另外，如果有任何方法可以使代码更高效，提高质量，欢迎提出。

Answer 1

Select 的 selected 值需要具有 {value: sth, label: sth} 这种对象格式才能显示在 select 容器中。由于您已将 event.label 分配给 selected_eml，因此它不会显示在 select 容器中。要解决此问题，您只需要做：this.setState({selected_eml: event})

React 下拉菜单不显示所选元素

React Dropdown menu not showing the selected element

javascript

drop-down-menu

reactjs