reactjs - 使用菜单项 React-MaterialUI-Firebase 选择

Question

我的问题是，选择以下选项时，它不会更改，无论我选择哪一个，它都保持在相同的选项中。

export default class Especialidad extends React.Component{
state= {
    data: [],
      especialidad:'',
}

peticionGet = () => {
  firebase.child("especialidad").on("value", (especialidad) => {
    if (especialidad.val() !== null) {
      this.setState({ ...this.state.data, data: especialidad.val() });
    } else {
      this.setState({ data: [] });
    }
  });
};

handleChange=e=>{
  this.setState({
    [e.target.name]: e.target.value
  })
}

componentDidMount() {
  this.peticionGet();
}

render(){
    return (
        <center>
        <FormControl >
        <InputLabel shrink id="demo-simple-select-placeholder-label-label">Especialidad</InputLabel>
        <Select labelId="demo-simple-select-placeholder-label-label" id="demo-simple-select-placeholder-label1" onChange={this.handleChange}  displayEmpty>
          {Object.keys(this.state.data).map(i=>{
             // console.log(i);
              return <tr key={i}>
                <MenuItem  name="especialidad" value={i}>{this.state.data[i].especialidad}</MenuItem>
              </tr>
            })}
          
        </Select>
        <FormHelperText>Escoger especialidad</FormHelperText>
      </FormControl>
      </center>
       );
}
}

在这种情况下，选择心脏病学不会改变。 在此处输入图像描述

更新更改

将handlechange改成handleChange=e=>{ this.setState({[e.target.especialidad] : e.target.value} ) } 新的问题是：

{Object.keys(this.state.data).map(i=>{
            //console.log(this.state.data[i].ids);
            return <tr key={this.state.data[i].ids}>
            <MenuItem key={this.state.data[i].ids} value={this.state.data[i].ids}>{this.state.data[i].especialidad}</MenuItem>
            </tr>
        })}   

此代码显示所有变量，但在更改其他选项时，没有捕获 id，仅捕获最后一个 id

标签： reactjsfirebasematerial-ui