javascript - react dropzone 与 react 图像文件调整器不起作用

Question

我正在与 react dropzone 合作和 react image file resizer当图像下降时上传多个调整大小的图像。
React Dropzone 工作正常(上传、显示缩略图)，无需 react 图像文件调整器。
但是将两个模块组合在一起，当图像下降时，它可以很好地调整大小，但不知何故不会更新状态。
似乎是由于使用 async,await 的方式错误造成的，
因为finally子句中的console.log比try-await子句中的console.log先出现。
这是有问题的代码。

这是 react 图像文件调整器代码:

  const resizeFile = (file) =>
    new Promise((resolve) => {
      Resizer.imageFileResizer(
        file,
        300,
        300,
        "JPEG",
        80,
        0,
        (uri) => {
          resolve(uri);
        },
        "file"
      );
    });

这是react dropzone中的onDrop方法:

/// onDrop method in react dropzone
  const onDrop = async (images) => {
    let uploadBranchImages = [];
    try {
      await images.map((image) => {
        resizeFile(image).then((resizedImage) => {
          console.log(resizedImage);
          Object.assign(resizedImage, {
            preview: URL.createObjectURL(resizedImage),
          });
          uploadBranchImages.push(resizedImage);
        });
      });
    } catch (err) {
      console.log(err);
    } finally {
      console.log(uploadBranchImages);
      let tempBranchImages = [...state.branchImages, ...uploadBranchImages];
      console.log(tempBranchImages);

      setState({
        ...state,
        branchImages: tempBranchImages,
      });
    }
  };

在这段代码中，首先出现finally子句中uploadBranch的日志，接下来是tempBranchImages的日志以及try子句中resizedImage的日志最后。
另外，当我将 URL 放入 Chrome 地址栏中时，调整大小的图像显示得很好。

这是日志的捕获: capture_of_logs

所以问题是......为什么这些代码不能按顺序工作？
因此，上传后图像不会显示在拖放区中。

有关更多信息，我将附加日志而不使用 react 图像文件调整器。 与上面捕获的数组预览不同

( [ ] 与 [文件] )

这是日志: capture_of_logs_without_resize

任何建议将不胜感激..

Answer 1

非常感谢您的回答，这正是我想要的。如果有人想使用钩子(Hook) useDropzone():

const {getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject} = useDropzone({
        accept: "image/*",
        maxFiles: 1,
        onDrop: async (acceptedFiles: any) => {
            await Promise.all(
                acceptedFiles.map((image: any) => {
                    return resizeFile(image);
                })
            ).then((uploadBranchImages) => {
                console.log('Upload Branch Images', uploadBranchImages);
                setImages(
                    uploadBranchImages
                        .map((image: any) => {
                                const imageModified = Object.assign(image, {
                                    preview: URL.createObjectURL(image)
                                })

                                handleFireBaseUpload(imageModified);
                                return imageModified;
                            }
                        )
                );

            })
        }
    });