Question

我正在解决一个问题，即在每次单击图标时，我们需要显示一个选择框（取自材料ui），并且该选择框内没有几个选项。再次单击该图标时，我们可以看到该选择框box。问题陈述是这样的。 link to solution where i render a header instead of select box

我看到的是选择框内的所有三个选项均未显示？这是代码。

includeblocks=()=>{
    const {classes}=this.props;
    let ClassData=[{
        _id:101,title:'Lol1',
        _id:102,title:'Lol2',
        _id:103,title:'Lol3'
    }];


  let formtoinsert=<FormControl className={classes.formControl}>
   <InputLabel htmlFor="age-simple">Class</InputLabel>
   <Select
     value={this.state.classselected}
     onChange={this.handleChange4}
     inputProps={{
       name: "classselected",
       id: "age-simple"
     }}
   >
     <MenuItem value="">
     </MenuItem>
     {ClassData.map(item => {
     return(
         <MenuItem value={item._id}>{item.title}</MenuItem>
     );
   })}

   </Select>
 </FormControl>;

  table=[];
  for (let i = 0; i < this.state.counter; i++) {
       table.push(formtoinsert);
  }
  console.log("table",table);
  return table;
}

我在渲染器中将此功能渲染为jsx，什么是正确的方法，哪里出了问题？

Answer 1

我认为问题在于：

1）您有非常奇怪的ClassData数组，它只是单个{_id: 103, title: "Lol3"}对象的数组。应该是这样的：

let ClassData = [
 {_id:101,title:'Lol1'},
 {_id:102,title:'Lol2'},
 {_id:103,title:'Lol3'}
];

2）您确定this.state.counter大于0吗？：）

2.1）您将收到“数组或迭代器中的每个子代在控制台中均应具有唯一的“键””错误（由于非唯一键）

3）在哪里定义表？应该是

let table=[];

4）将formtoinsert中的jsx包装为'（）'，甚至将其包装为具有当前计数器步骤参数的函数（以修复2.1错误）

示例代码在这里：https://jsfiddle.net/ybigus/fkxn3wvr/2/

希望有帮助

物料ui的选择框中未显示数据

1 个答案: