如何在React-dropzone-uploader中将响应数据从后端获取到React

问题描述

 const MyUploader = () => {
    
    const getUploadParams = ({ Meta,url }) => {          // specify upload params and url for your files
      console.log("uploadParams",Meta,url)
      return { url: '/v1/file_uploads/' }
    }
       
    const handleChangeStatus = ({ Meta,file },status) => {     // called every time a file's `status` changes
      console.log("handleStatus",status,file) 
    }
        
    const handleSubmit = (files,allFiles) => {   // receives array of files that are done uploading when submit button is clicked
      console.log(files.map(f => f.Meta))
      allFiles.forEach(f => f.remove())
    }
  
    return (
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*"
      />
    )
  }

<MyUploader />

我能够将上传的文件保存在数据库中，保存文件后我正在呈现一些信息

render json: {status: "Success",blob: blob,url: URL }

我该如何控制台记录我在React中呈现的数据？

该软件包的链接为：https://github.com/fortana-co/react-dropzone-uploader

解决方法

我已经通过将xhr作为参数传递给handleChangeStatus函数解决了这个问题。

const MyUploader = () => {
    
    const getUploadParams = ({ meta }) => {          // specify upload params and url for your files
      return { url: '/v1/file_uploads/' }
    }  

    const handleChangeStatus = ({ meta,file,xhr },status) => {     // called every time a file's `status` changes
      console.log("handleStatus",status,meta,file) 
      if(status == "done") { 
        var json = JSON.parse(xhr.response)
        var arr_blob_ids = state.documents_blob_ids.slice()
        console.log("id added",json.blob.id)
        if (json.blob.id){
          arr_blob_ids.push(json.blob.id)
          setState({...state,documents_blob_ids: arr_blob_ids})
        }
       }

      else if(status == "removed") {
        var json = JSON.parse(xhr.response)
        var arr_blob_ids = state.documents_blob_ids.slice()
        console.log("id removed",json.blob.id)
        if (json.blob.id){
          arr_blob_ids =  arr_blob_ids.filter( v => v!= json.blob.id)
          setState({...state,documents_blob_ids: arr_blob_ids})
        }       
      }
     
    }
        
    const handleSubmit = (files,allFiles) => {   // receives array of files that are done uploading when submit button is clicked
      console.log(files.map(f => f.meta))
      allFiles.forEach(f => f.remove())
    }
  
    return (
      <Dropzone
        getUploadParams={getUploadParams}
        onChangeStatus={handleChangeStatus}
        onSubmit={handleSubmit}
        accept="image/*"    
        submitButtonContent = {null}
        SubmitButtonComponent = {null}    
      />
    )
  }