Данные не отображаются в поле выбора в пользовательском интерфейсе

Question

Я работаю над проблемой, когда при каждом щелчке по значку нам нужно показывать одно поле выбора (взято из пользовательского интерфейса материала), и у этого выбора есть несколько вариантов внутри. Когда мы снова нажимаем на значок, мы видим, что выборbox.The постановка проблемы что-то вроде этого. ссылка на решение, в котором я отображаю заголовок вместо поля выбора

Что я вижу, что все три параметра в окне выбора не отображаются?Вот код.

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) обернуть ваш jsx в formtoinsert в '()' или даже обернуть как функцию с текущим параметром шага счетчика (чтобы исправить ошибку 2.1)

Пример кода здесь: https://jsfiddle.net/ybigus/fkxn3wvr/2/

Надеюсь, что поможет