想要动态下拉选择但不知道为什么它不起作用它在用户界面中显示空白下拉

问题描述

我使用 map 函数来使用检索到的数据。但我无法获得下拉选择 i 用户界面。但是当我检查数组是否包含数据时，它在写入控制台时工作正常。但是当我使用动态使用选择时，我无法使用并且下拉选择在 UI 中显示为空..请查看此

看看这个

其余一切正常，只有下拉列表显示为空。我尝试了很多方法，但都没有成功。

class SignUp extends Component {
  componentDidMount(){
        
        M.AutoInit();

        axios.get('http://localhost:8900/department')
      .then(result => {
         this.setState({departmentData:result.data})
      }).catch((err) => {
      console.log("Error",err)
    });
    }
state = {
    
    departmentData:[]
    };


  render() { 
    return (
      <div className="container">
        <form className="white" onSubmit={this.handleSubmit}>
          <h5 className="grey-text text-darken-3">Sign Up</h5>
          <div className="input-field col s1">
            <span style={{color: 'red'}}> * </span>
            <select id='department'  onChange={this.handleChange}>
              
               {this.state.departmentData.map((dep)=>(
                 
                    <option  key={dep.id} value={dep.id}>{dep.department_name}</option>
                ))}
            </select>
            <label>Department</label>
          </div>
          
    </div>
        </form>
      </div>
    )
  }
}

const mapStatetoProps = (state) => {
  return {
    authstatus:state.auth.authstatus,authError: state.auth.authError
  }
}

const mapdispatchToProps = (dispatch)=> {
  return {
    signUp: (creds) => dispatch(signUp(creds))
  }
}

export default connect(mapStatetoProps,mapdispatchToProps)(SignUp)```


**


  [1]: https://i.stack.imgur.com/0e7Sd.png

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）