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

【问题标题】：Is there a way to use reader.onload return to set my state in react?有没有办法使用 reader.onload return 来设置我的状态？
【发布时间】：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);这一行的？

标签： javascript reactjs typescript asynchronous filereader

【解决方案1】：

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

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

【讨论】：