Javascript 材质ui在显示要渲染的数据列表时选择“不工作”

我正在尝试显示“在材质中选择”界面，在该界面中，我需要从所有可以选择的值中选择一项。 这是代码。 我有datatoloop，我需要迭代它，选择主题并在控制台中获取它们的id。我无法确定我做错了什么，或者材质ui只接受文档页面中显示的格式。 这是文档页面

这是我试图编辑代码的沙盒的链接

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/Input”导入输入；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/FormHelperText”导入FormHelperText；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入选择；
常量样式=主题=>({
根目录：{
显示：“flex”，
柔性包装：“包装”
},
表单控制：{
边距：theme.space.unit，
最小宽度：120
},
选择空：{
marginTop:theme.space.unit*2
}
});
设datatoloop=[
{id:100，主题：“数学”}，
{id:101，主题：“物理学”}，
{id:102，主题：“化学”}
];
类SimpleSelect扩展了React.Component{
状态={
年龄：“，
姓名：“海”
};
handleChange=事件=>{
this.setState（{[event.target.name]：event.target.value}）；
};
render（）{
const{classes}=this.props；
返回(
年龄
没有一个
{datatoloop.map（项=>{
{项目.主题}；
})}
);
}
}
SimpleSelect.propTypes={
类：PropTypes.object.isRequired
};
导出默认样式（样式）（SimpleSelect）；

在react树中映射组件时忘记返回组件

这是工作代码沙盒：

返回{item.subject}；

是的，谢谢你，伙计。

    import React from "react";
    import PropTypes from "prop-types";
    import { withStyles } from "@material-ui/core/styles";
    import Input from "@material-ui/core/Input";
    import InputLabel from "@material-ui/core/InputLabel";
    import MenuItem from "@material-ui/core/MenuItem";
    import FormHelperText from "@material-ui/core/FormHelperText";
    import FormControl from "@material-ui/core/FormControl";
    import Select from "@material-ui/core/Select";

    const styles = theme => ({
      root: {
        display: "flex",
        flexWrap: "wrap"
      },
      formControl: {
        margin: theme.spacing.unit,
        minWidth: 120
      },
      selectEmpty: {
        marginTop: theme.spacing.unit * 2
      }
    });
    let datatoloop = [
      { id: 100, subject: "math" },
      { id: 101, subject: "physics" },
      { id: 102, subject: "chemistry" }
    ];
    class SimpleSelect extends React.Component {
      state = {
        age: "",
        name: "hai"
      };

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

      render() {
        const { classes } = this.props;

        return (
          <form className={classes.root} autoComplete="off">
            <FormControl className={classes.formControl}>
              <InputLabel htmlFor="age-simple">Age</InputLabel>
              <Select
                value={this.state.age}
                onChange={this.handleChange}
                inputProps={{
                  name: "age",
                  id: "age-simple"
                }}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                {datatoloop.map(item => {
                  <MenuItem value={item.id}>{item.subject}</MenuItem>;
                })}
              </Select>
            </FormControl>
          </form>
        );
      }
    }

    SimpleSelect.propTypes = {
      classes: PropTypes.object.isRequired
    };

    export default withStyles(styles)(SimpleSelect);

return  <MenuItem value={item.id}>{item.subject}</MenuItem>;