有没有一种方法可以使用reader.onload return将我的状态设置为react

Question

我正在尝试压缩使用react images上传组件上传的图像。在压缩步骤之后，我需要将文件转换为Base64，并使用它来更新我的状态。

代码如下：

const ImageUpload: React.FC<ImageUploadProps> = ({ setImgUrl }) => {
const handleChange = useCallback(
(files: File[], pictures: string[]) => {
const options = {
maxSizeMB: 1,
useWebWorker: true
}
getBase64(files[0], options).then(function(result) {
setImgUrl(result);
});
},
[setImgUrl],
);
function getBase64(file: File, options: any){
return new Promise(function(resolve, reject) {
Compress(file, options).then(compressedBlob => {
const convertedBlobFile = new File([compressedBlob], file.name, {type: file.type, lastModified: Date.now()})
let reader = new FileReader();
reader.readAsDataURL(convertedBlobFile);
reader.onerror = reject;
reader.onload = function() { resolve(reader.result); };
})
});
}

但我在setImgUrl(结果(部分遇到了问题。。。我一直收到错误：

类型为"unknown"的参数不可分配给类型为"SetStateAction"的参数。类型"unknown"不可分配给类型"(prevState:string(=>字符串'。

有人能帮我吗？

Answer 1

我相信您可以通过将未知的result类型强制转换为字符串来解决typescript错误。setImgUrl需要一个字符串，但typescript不知道getBase64在promise中返回了什么。因此，要么键入getBase64函数以返回Promise<字符串>或简单使用：

getBase64(files[0], options).then(function(result) {
setImgUrl(result as string);
});