小编Muh*_*aza的帖子

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

我有一个服务器返回的 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>
      );
    });
  }  
Run Code Online (Sandbox Code Playgroud)

我的 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"}] 
Run Code Online (Sandbox Code Playgroud)

javascript json ecmascript-6 reactjs

1
推荐指数
1
解决办法
4万
查看次数

如何在React js ES6中使用Promise.all

我想要做的是将文件上传到服务器上,然后获取上传文件的 URL 并预览它。文件可以有多个。为此,我编写了以下代码:

 let filesURL=[];
 let promises=[];
 if(this.state.files_to_upload.length>0) {

    for(let i=0; i<this.state.files_to_upload.length; i++) {
        promises.push(this.uploadFilesOnServer(this.state.files_to_upload[i]))
    }

    Promise.all(promises).then(function(result){
        console.log(result);
        result.map((file)=>{
            filesURL.push(file);
        });
    });
    console.log(filesURL);
}
const uploadedFilesURL=filesURL;
console.log(uploadedFilesURL);
Run Code Online (Sandbox Code Playgroud)

console.log(filesURL);给我返回的值Promise.all
我只想在Promise.all正确完成时使用这些值。但是,我面临的问题是线路console.log(uploadedFilesURL);首先执行,而不考虑Promise.all并给我undefined价值。我认为我没有正确使用承诺,有人可以帮助我吗?
uploadFileOnServer代码是:

uploadFilesOnServer(file)
  {
    let files=[];
    let file_id='';

    const image=file;
    getImageUrl().then((response) => {
      const data = new FormData();
      data.append('file-0', image);
      const {upload_url}  = JSON.parse(response);
      console.log(upload_url);

      updateProfileImage(upload_url, data).then ((response2) => {
      const data2 = JSON.parse(response2);
      file_id=data2;
      console.log(file_id);
      files.push(file_id);
      console.log(files);
        });
    }); …
Run Code Online (Sandbox Code Playgroud)

javascript ajax reactjs

0
推荐指数
1
解决办法
3万
查看次数

标签 统计

javascript ×2

reactjs ×2

ajax ×1

ecmascript-6 ×1

json ×1