JavaScript Выпуск выпадающего списка - Карта массива не работает

Question

Я новичок в JavaScript, и у меня возникла серьезная проблема при попытке заполнить раскрывающийся список значениями, которые запрашиваются из базы данных SQL и возвращаются в виде файла JSON. Мой серверный код, кажется, работает хорошо, запрашивая БД, и если я попадаю на сервер напрямую, он дает мне следующие JSON данные:

[{
    "key": "1AEFF22E-7A2C-4920-B72A-255119E785A8",
    "value": "ExampleSSRSProject"
}, {
    "key": "5A8AE6D3-4A96-4048-9207-6DDDA5B7D19E",
    "value": "MyReportPackage"
}, {
    "key": "EA2CD590-FA01-4094-86EE-414C860E597A",
    "value": "CoverSheet"
}]

Однако, когда я запускаю код страницы клиента, я просто получаю ошибку :

"Предупреждение. У каждого ребенка в списке должна быть уникальная" ключевая "опора".

Ниже я перечислил свой код от server.js, клиента componentDidMount () и рендер.

    app.get('/api/reportList', (req,res) => {    
connection.connect(err=>{
    if(err){
      console.log(err);
      res.statusCode = 200;
      res.setHeader('content','text/plain');
      res.end(err);
    }
    else{
        var sqlrequest = new sql.Request(connection);
        sqlrequest.query("select ItemId as 'key',Name as 'value' FROM    
         ReportServer$SQL2014.dbo.Catalog where Name <> ''",(err,result)=>{
          if(err){
              console.log(`SQL Error`);
              res.statusCode = 200;
              res.setHeader('content','text/plain');
              res.end("SQL Error");
            }
            else{
              console.log(result);
              res.statusCode = 200;
              res.setHeader('content','text/plain');
              res.json(result.recordset);
              connection.close();
            }
        })

    }
})
});


    componentDidMount() {
fetch("api/reportList")
.then((response) => {
  return response.json();
})
.then(data => {
  let reportsFromApi = data.map((report,index) => {
    return {key: {index}, display: report}
  });
  this.setState({
    reports: reportsFromApi
  });
}).catch(error => {
  console.log(error);
}); 


      render() {
    return (
      <div>
  <select>
    {this.state.reports.map((report) => <option key={report.ItemId} value={report.Name}     
  >{report.Name}</option>)}
  </select>
      </div>
    )
  }


 import React, {Component} from 'react';
 import logo from './logo.svg';
 import './App.css';

 import ReportList from './components/reportList/reportList';

 class App extends Component {
   render() {
     return (
     <div className="App">
       <ReportList/>
       </div>
     );
   }
 }

 export default App;

Answer 1

Я думаю, это потому, что в вашем компоненте React вы используете атрибут ItemId в качестве «ключевого» свойства.

{this.state.reports.map((report) => <option key={report.ItemId} value={report.Name}>...</option>)}

Проблема в том, что ваши объекты «отчета» передаются из кода вашего сервера к вашему клиентскому коду, похоже, не принадлежит свойство ItemId. Это означает, что всем вашим option элементам передано свойство "key", равное undefined и, следовательно, не уникальное.

Вы можете использовать " ключевой "атрибут вашего" объекта отчета ", хотя, как это:

{this.state.reports.map((report) => <option key={report.key} value={report.Name}>...</option>)}