为什么 JavaScript 展开表示法在这里不起作用

我正在学习 React，有一个我无法解决的简单问题。

我创建了一个代码沙盒 https://codesandbox.io/s/react-dropzone-sha256-5ngg7?file=/src/FileUpload.js

在图像中：file是一个键值数组，如图所示。

下面的代码运行后：

return { ...file, md5: SHA256(fileContents).toString() };

然后结果是键值对被删除，如下图所示：

如您所见，该文件现在只包含path and md5其他一切都消失了。

我知道这可能与浅复制原理有关，但我正在寻找解决方案，但不明白如何解决这个问题。

const FilePicker = ({ setNewFileForValidation }) => {
    const readFileContents = async file => {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.onerror = reject;
            fileReader.readAsBinaryString(file);
        });
    };
    const readAllFiles = async AllFiles => {
        const results = await Promise.all(
            AllFiles.map(async file => {
                const fileContents = await readFileContents(file);
                return { ...file, md5: SHA256(fileContents).toString() };
            }),
        );
        console.log(results, 'resutls');
        return results;
    };

    function onDrop(acceptedFiles, rejectedFiles) {
        readAllFiles(acceptedFiles).then(result => {
            setNewFileForValidation(result);
        });
    }
    return <Dropzone onDrop={onDrop} />;
};

The file来自反应-dropzone https://react-dropzone.js.org/并包含文件选择器的结果。也许这就是这个传播副本不起作用的原因？

文件是一个特殊的对象，其属性是不可枚举的。因此扩展语法无法按预期工作。你需要克隆文件对象 https://stackoverflow.com/questions/51579163/how-to-clone-file-objects-in-javascript使用文件构造函数。

readAllFiles = async (AllFiles) => {
    const results = await Promise.all(
      AllFiles.map(async (file) => {
        const fileContents = await this.readFileContents(file);
        // THIS IS THE PROBLEM
        //return { ...file, md5: SHA256(fileContents).toString() };
        file = new File([file], file.name, { type: file.type })
        file.md5 = SHA256(fileContents).toString();
        return file;
      })
    );
    console.log(results, "result");
    return results;
  };