如何解决为什么 JavaScript 传播符号在这里不起作用
我创建了一个 Codesandbox
以下代码运行后:
return { ...file,md5: SHA256(fileContents).toString() };
然后结果是键值对被删除,如下图所示:
如您所见,该文件现在只包含 path
和 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} />;
};
file
来自 react-dropzone 并包含来自文件选择器的结果。也许这就是这个传播副本不起作用的原因?
解决方法
File 是一个特殊的对象,它的属性是不可枚举的。因此,展开语法无法正常工作。您需要 clone the File object 使用 File 构造函数。
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;
};
,
也许你可以把地图变成 for。
readAllFiles = async (AllFiles) => {
let results = [];
for (let file of AllFiles) {
const fileContents = await this.readFileContents(file);
results.push({ file,md5: SHA256(fileContents).toString() });
}
console.log(results,"result");
return results;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。