我有几个组件使用Modal上传文件,然后将其提交给后端进行处理。用户可以上传一个或多个文件,并将它们存储在Redux中,然后在主页上列出。到后端的提交由实用程序功能完成,该实用程序功能发出API调用并检查状态以确保正确提交了后端处理。提交到后端的每个文件都由groupId标识。当用户单击FileDrop组件上的“继续”按钮时,上传和后续提交就会开始。
一切都很好,直到要求排除任何重复的文件为止(目前为fileName)。如果检测到重复文件(通过查询Redux存储中的文件列表),将为用户提供取消请求或替换现有文件的机会……这就是麻烦所在。
这是代码的骨架,显示了相关的部分。取消请求就可以了;但是替换文件时,我无法正确更新Redux存储。
代码流如下:
[1]
用户请求上传文件并调用组件ModalFileDropPage
[2]
调用FileDrop
组件;将显示模式,用户选择一个文件,然后单击“继续”按钮。
[3]
调用handleModalUpload
函数,该函数将上载的文件提交到后端。它通过函数removeGroupIdFromRedux
作为参数传递。
[4]
如果文件重复,并且用户请求替换前一个文件,我们将从后端删除该文件,然后请求通过指向{{1}的链接删除关联的Redux项。 }函数。当前对上载文件的请求以常规方式处理,并返回removeGroupIdFromRedux
(可能是错误)并返回continueToNextPage
mediaInfo
当用户选择替换现有文件时,成功调用removeGroupIdFromRedux函数,并且日志显示该操作已成功执行,并且Redux中现在少了一个项目(在下图中,只有一个文件用于测试,因此此调用的结果是一个空的徽标数组。
接下来发生的事情是执行了continueToNextPage中的SUCCESS代码,并将徽标数组设置为两个项目-原始项目和新添加的项目。无法识别对Redux存储的先前更新。
两个问题: 1)我尝试的实际可行吗? 2)如果是,我在做什么错? 谢谢