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

我是React的初学者。在下面的代码中，我基本上使用flask api从db读取数据，并根据从动态下拉列表中选择的选项返回数据，该列表还从另一个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;

import React，{Component}来自“React”
从“axios”导入axios；
从“反应选择”导入选择；
类ListUser扩展组件{
建造师（道具）{
超级（道具）
这个州={
用户列表：[]，
选定的\u eml:[]，
所选电子邮件：“”，
用户列表：[]
}
}
componentDidMount（）{
get（'/getuserList'，{crossDomain:true}）
。然后（响应=>{
if（response.status==200&&response！=null）{
console.log（“用户列表”，response.data）
this.setState（{userList:response.data，selected_eml:response.data}）；
}
})
}        
selectedUserHandler（事件）{
this.setState（{selected_eml:event.label}）
让email=event.value
get（'/getUserlisting/'+email）。然后（response=>{
if（response.status==200&&response！=null）{
this.setState（{user_list:response.data}）；
console.log（response.data）
}else{console.log（“错误”）}
})
} 
componentDidUpdate（）{
让email=this.state.selected\u eml
get（'/getUserlisting/'+email）。然后（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（“错误”）}
}) 
}    
render（）{
变量过滤器\用户\列表=[]
for（此.state.selected\u eml中的var键）{
console.log（this.state.selected_eml[key]['value']））
筛选用户列表推送（此.state.selected\u eml[key]['value']）
}
console.log（过滤器\用户\列表）
返回(
电子邮件




用户列表
用户ID
电子邮件
P ID
P名称
{this.state.user_list.map（（mp，index）=>
{mp.user_id}
{mp.email}
{mp.id}
{mp.name}
) }
)
}
}    
导出默认列表用户；

我面临的问题是，当我从下拉列表中选择一个选项时，它会返回数据，但不会显示在下拉占位符栏中选择的选项。我已经尝试过用

selectedUserHandler

中的

bind（this）

传递

selectedUserHandler

函数的

onChange

和

getOption

方法传递

selected\eml

，但运气不佳

---

此外，如果有任何方法可以提高代码的效率和质量，那么输入是最受欢迎的。

Select的选定值需要具有

{value:sth，label:sth}

的对象格式，以便在Select容器中显示。而且，由于您已将

event.label

分配给所选的\u eml，因此它不会显示在select容器中。要解决这个问题，你只需要做：

this.setState（{selected\u eml:event}）

我想你的括号中有一个错误

（mp，index）=>

在

之前必须有一个

（

）和另一个关闭的

）}

。代码运行良好，没有返回错误或任何内容，但我将尝试您的建议。我尝试过，它现在显示所选选项，但不再显示所选选项返回的数据。我不明白为什么会这样……你说的“它不再显示数据”是什么意思？哪些数据？那是打字错误，我编辑了我的评论。我所指的数据是在从下拉列表中选择一个选项后获取的，并以表格格式显示。我认为这是因为在componentDidUpdate中，您已经通过了所选的\u eml，它现在是一个对象，作为电子邮件。您需要传递选定的_eml.value来修复此问题。您对如何改进代码有什么建议吗？另外，如果您能为我推荐一些学习材料，我将不胜感激：）