我目前正在构建一个React组件,用户可以在其中上传图像。在这个简化的示例中,我希望上传3个图像。当每个文件上传完成时,我希望将此文件添加到我的已上传文件列表中。
问题:因为useState的setter方法不是同步的,所以我们只将三个上传文件中的一个添加到列表中。另外两个添加的文件被最后一个上传文件覆盖。
下面举个例子:
第一个
结果如下:[“aaa.jpg”,“bbb. jpg”,“ccc. jpg”,“fff. jpg”]
我想要的结果是:[“aaa.jpg”,“bbb.jpg”,“ccc.jpg”,“ddd.jpg”,“eee.jpg”,“fff.jpg”]
这听起来像是一个常见的用例。
- 如何解决这个问题?您应该如何处理多个setState?
- 有没有更好的方法来处理多个文件的上传?在我的用例中,如果用户点击提交按钮,我必须删除一些选定的文件,并在AWS S3服务器上上传一些选定的文件。
谢谢
1条答案
按热度按时间qacovj5a1#
使用setter的回调版本。
目前,这会将一个元素添加到组件呈现时的状态数组中:
但是,如果多个状态更新可以被批处理/排队,那么它们中的每一个都将使用相同的初始值。相反,回调版本提供该批处理/队列中的任何当前状态值: