如何在 reactjs ES6 中的 JSONArray 上使用 .map() 函数

debugcn 发表于 Dev

哈米德·拉扎 |

我有一个服务器返回的 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"}]

哈桑·伊玛目

正如其他用户所指出的，您必须使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。