反应redux状态更改会被覆盖

时间:2019-12-06 20:16:21

标签: javascript reactjs react-redux

我有几个组件使用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存储的先前更新。 Redux state changes to the logos array

两个问题: 1)我尝试的实际可行吗? 2)如果是,我在做什么错? 谢谢

0 个答案:

没有答案