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

时间:2020-02-18 23:59:24

标签: javascript arrays dropdown

我是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;

1 个答案:

答案 0 :(得分:1)

我认为这是因为在React组件中,您将ItemId属性用作“关键”道具。

String myurl = "file:///android_asset/bein"+getIntent().getStringExtra("num")+".html";
WebView view = findViewById(R.id.webView);
view.getSettings().setJavaScriptEnabled(true);
view.getSettings().setSupportMultipleWindows(true);

String newUA= "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Safari/602.1.50";
view.getSettings().setUserAgentString(newUA);
view.setWebViewClient(new WebViewClient());
view.loadUrl(myurl);
CookieSyncManager.createInstance(this);
CookieSyncManager.getInstance().startSync();
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    CookieManager.getInstance().setAcceptThirdPartyCookies(view, true);
}
view.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        return (event.getAction() == MotionEvent.ACTION_MOVE);
    }
});

问题是从服务器代码传递到客户端代码的“报告”对象似乎没有“ ItemId”属性。这意味着您的所有 option 元素都被传递了一个属性,该属性等于 undefined ,因此不是唯一的。

您可以使用“报告”对象的“键”属性,如下所示:

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