Reactjs 如何将上传的值存储到redux存储中

嗨，我正在使用react、redux和ant设计页面上传文件。我能够成功地将所选文件发送到后端，也能够存储到数据库中。现在作为响应，我返回一些需要存储在redux存储中的文件元数据

现在的问题是，当我转到下一页并返回上一页时，我调用redux将完整的表单字段存储到redux存储中。 所以现在对于我的上传文件，它会被更新为某个对象，该对象包含内容文件和文件列表，而我想保存从后端返回的响应元数据

我曾尝试将响应元数据分配给我的上载字段，但当我来回返回时，它会被内容文件和文件列表中的某个对象覆盖。 所以我无法理解我做错了什么。有人能帮我做这些吗

A.js文件：

import React，{Component}来自“React”
从“./B”导入上载文件
从“antd”导入{按钮、表单、图标、上传}；
导出类A扩展组件{
uploadFileHandler=（{file，onSuccess}）=>{
上传文件（文件，onSuccess）。然后（数据=>{
this.props.updateProjectReport({
项目报告：数据
});
});
};
render（）{
const{getFieldDecorator}=this.props.form；
返回(


{getFieldDecorator（“项目报告”{
初始值：this.props.project.projectReport
})(
点击上传
)}
)
}
}
导出默认值A

B.js文件：

从“axios”导入axios；
const uploadFile=（道具，成功时）=>{
让我们看看细节；
log（“上传文件调用”）；
const data=新表单数据（）；
data.append（“文件名”，道具）；
常量配置={
标题：{
“内容类型”：
“多部分/表单数据；边界=---WebKitFormBoundaryqTqJIxvkWFYqvP5s”
}
};
返回轴
.post（“http://localhost:8080/upload，数据，配置）
。然后（resp=>{
如果（各自状态===200）{
设置超时（（）=>{
成功（“ok”）；
}, 0);
fileDetails=resp.data；
console.log（文件详细信息）；
返回文件详细信息；
}
})
.catch（错误=>{
console.log（错误）；
});
};
导出默认上传文件；

这是我在减速器中来回移动时得到的数据

projectReport: {
        file: {
          uid: 'rc-upload-1567617261814-3',
          lastModified: 1565243029823,
          lastModifiedDate: '2019-08-08T05:43:49.823Z',
          name: 'rose-blue-flower-rose-blooms-67636.jpeg',
          size: 20775,
          type: 'image/jpeg',
          percent: 0,
          originFileObj: {
            uid: 'rc-upload-1567617261814-3'
          },
          status: 'done',
          response: 'ok'
        },
        fileList: [
          {
            uid: 'rc-upload-1567617261814-3',
            lastModified: 1565243029823,
            lastModifiedDate: '2019-08-08T05:43:49.823Z',
            name: 'rose-blue-flower-rose-blooms-67636.jpeg',
            size: 20775,
            type: 'image/jpeg',
            percent: 0,
            originFileObj: {
              uid: 'rc-upload-1567617261814-3'
            },
            status: 'done',
            response: 'ok'
          }
        ]
      }

预期Json将被存储：

projectReport: {
        fileName: "rose-blue-flower-rose-blooms-67636.jpeg", 
        fileDownLoadUri: "http://localhost:8080/downloadFile/rose-blue-flower-rose-blooms-67636.jpeg", 
        fileContentType: "image/jpeg", 
        fileSize: 20775
      }

---

您的

uploadFileHandler

方法应该是调用一个操作，该操作将依次调用B.js中的

uploadFile

方法和

dispatch

结果

fileDetails

。在reducer中，您可以从包含必要字段的

fileDetails

创建一个新的

projectReport

对象

projectReport: {
    fileName: fileDetails.file.name, 
    fileDownLoadUri: SERVER_PATH +fileDetails.file.name", 
    fileContentType: fileDetails.file.type, 
    fileSize: fileDetails.file.size
  }

---

首先，看起来您拥有获取所需JSON所需的所有数据。您需要为此状态创建redux操作和reducer，然后将响应（fileDetails）分派给该reducer。您可能需要查看redux thunk以创建异步调度（允许您链接多个调度）。嘿，我可以将数据存储到redux存储中，但当我来回移动时，GetFieldDecorior的初始值没有得到更新。因此，我可以在上传之前设置任何默认字段，然后在上传之后使用我的projectReport对象更新该默认字段。