javascript - 似乎无法正确地将函数转换为异步

Question

我正在尝试将以下函数转换为 React 中的异步函数(使用 CompressorJS):

const UploadImages = ({ jobInfo, setLoading, getData, accountInfo }) => {
    const [files, setFiles] = useState([]);

    const onDrop = useCallback( uploadedFiles => {
        uploadedFiles.forEach((file) => {
            console.log(file)
            new Compressor(file, {
                quality: 0.5,
                width: 500,
                height: 500,
                resize: "contain",function.
                success(result) {
                    setFiles([...files, result]);
                    console.log(result)
                },
                error(err) {
                    console.log(err.message);
                },
            });
        })
    }, [files]);

    return(<a bunch of stuff here>);
}

使用上面的代码片段时，如果 uploadedFiles 包含多个文件，压缩每张照片并将其添加到状态 ([files, setFiles]).只会添加其中一张图片，其他图片将被遗漏。

我花了几个小时尝试以不同的方式修改这个函数，到目前为止我想出的最好的解决方案如下:

function compressFile(file) {
    return new Promise((resolve, reject) => {
        new Compressor(file, {
            quality: 0.5,
            width: 500,
            height: 500,
            resize: "contain",function.
            success(result) {
                resolve(result) 
            },
            error(err) {
                console.log(err.message);
                reject(err)
            },
        });
    });
}

function compressFiles(files) {
    return new Promise((resolve, reject) => {
        files.forEach((file) => {
            console.log(file)
            compressFile(file)
                .then(compFile => { 
                    console.log(compFile)
                    setFiles([...files, compFile]);
                })
        })
        resolve()
    })
}

const onDrop = useCallback( async acceptedFiles => {
    message.loading('Compressing Images...');
    compressFiles(acceptedFiles)
}, [files]);

不幸的是，这仍然不起作用，我想知道是否有人可以解释我哪里出错了。

Answer 1

这应该有帮助:

const compressFiles = files => Promise.all(
  files.map(file => compressFile(file))
)
  .then(compressedFiles => {
    console.log(compressedFiles);
    setFiles([...files, ...compressedFiles]);
  });