有没有办法使用 reader.onload return 来设置我的状态？

Posted 2023-02-19

【中文标题】有没有办法使用 reader.onload return 来设置我的状态？

【英文标题】：Is there a way to use reader.onload return to set my state in react?

【发布时间】：2021-06-27 02:00:11

【问题描述】：

我正在尝试压缩使用 react-images-upload 组件上传的图像。在压缩步骤之后，我需要将文件转换为 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(result) 部分遇到问题...我一直收到错误：

“未知”类型的参数不能分配给“SetStateAction”类型的参数。 类型 'unknown' 不能分配给类型 '(prevState: string) => string'。

有人可以帮帮我吗？

【问题讨论】：

那个打字稿错误说它是针对setImgUrl(result);这一行的？

【参考方案1】：

我相信您可以通过将未知的result 类型转换为字符串来解决打字稿错误。 setImgUrl 需要一个字符串，但 typescript 不知道来自 getBase64 的承诺中返回的内容。所以要么输入 getBase64 函数来返回一个 Promise 或者简单地使用：

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