JavaScript下拉框问题-数组映射不起作用

Question

我是Java脚本的新手，试图用从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元素都被传递了一个等于undefined的“键”属性，因此，它不是唯一的。

但是您可以使用“报告”对象的“键”属性，如下所示：

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