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

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

我使用 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