javascript 如何在 reactjs ES6 中的 JSONArray 上使用 .map() 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45904293/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use .map() function on JSONArray in reactjs ES6
提问by Hamid Raza
I have a JSONArray returned by the server. I want to use .map() on it so that i can get key,values pairs of every object present in that array. I have written following code but i am getting error "files.map is not a function". Can anyone please help me resolve this?
我有一个服务器返回的 JSONArray。我想在其上使用 .map() 以便我可以获得该数组中存在的每个对象的键值对。我编写了以下代码，但出现错误“files.map 不是函数”。任何人都可以帮我解决这个问题吗？
showUploadedFiles()
{
const page = 1;
const items_per_page = this.state.event.file_ids.length;
getAllTaskFiles(this.state.event.id, page, items_per_page).then((allFiles) => {
this.renderUploadedFiles(allFiles);
});
}
renderUploadedFiles(files)
{
let details = null;
details = files.map((singleFile) => {
return (
<div>
<a href="#" >{singleFile.filename}</a>
<a href="#" >{singleFile.file_path}</a>
</div>
);
});
}
My JSONArray is:
我的 JSONArray 是：
[{"file_id": 5224879255191552, "filename": "children_walk_friends_forest_116878_3840x2160.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC81MjI0ODc5MjU1MTkxNTUyL2Zha2UtemRNeklhZ1RTYl9PN3RXY2pXbkhVQT09"}, {"file_id": 4943404278480896, "filename": "banner_old.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC80OTQzNDA0Mjc4NDgwODk2L2Zha2UtcmJjbDBVdVFzVmZkMjRtRUV2ME1xZz09"}]
回答by Hassan Imam
As pointed out by other users, you have to use JSON.parse()to get object from your string. Here is the code snippet, storing your files in an array.
正如其他用户所指出的，您必须使用JSON.parse()从字符串中获取对象。这是代码片段，将您的文件存储在数组中。
var str = '[{"file_id": 5224879255191552, "filename": "children_walk_friends_forest_116878_3840x2160.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC81MjI0ODc5MjU1MTkxNTUyL2Zha2UtemRNeklhZ1RTYl9PN3RXY2pXbkhVQT09"}, {"file_id": 4943404278480896, "filename": "banner_old.jpg", "file_path": "/api/files/encoded_gs_file%3AdHJhY2tpbmctYXBpL3YxL2FjY291bnRzLzU2Mjk0OTk1MzQyMTMxMjAvdGFza3MvNDk5NjE4MDgzNjYxNDE0NC80OTQzNDA0Mjc4NDgwODk2L2Zha2UtcmJjbDBVdVFzVmZkMjRtRUV2ME1xZz09"}]';
var files = JSON.parse(str);
var details = files.map((singleFile) => {
return (
<div>
<a href="#" >{ singleFile.filename}</a>
<a href="#" >{singleFile.file_path}</a>
</div>
);
});
console.log(details);.as-console-wrapper { max-height: 100% !important; top: 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>