reactjsのJSONArrayで.map（）関数を使用する方法ES6

Question

サーバーから返された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> 
    ); 
    }); 
    } 

マイ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"}] 

Answer 1

、あなたの文字列からオブジェクトを取得するために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>