我是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;
答案 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 元素都被传递了一个
您可以使用“报告”对象的“键”属性,如下所示:
{this.state.reports.map((report) => <option key={report.ItemId} value={report.Name}>...</option>)}