等待功能组件中的功能

debugcn 发表于 Dev

用户名

我有一个渲染图像的功能组件，我File还是一个孩子时就需要一个道具，需要将其转换为dataUri用于图像源的，但是我不确定如何await在非异步函数中使用。

 const toBase64 = file =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })

export default function Print({item}) {
  const classes = useStyles({})

  const dataUri = await toBase64(item.photo) //can't use wait here

  return (
    <div className={classes.root}>
      <div className={classes.imgContainer}>
        {dataUri && <img className={classes.img} src={dataUri.toString()} />}
      </div>
    </div>
  )
}

任何帮助，将不胜感激。

丹尼斯瓦什

您应该尝试将逻辑移至useEffect回调：

const toBase64 = file =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

export default function Print({ item }) {
  const [dataUri, setDataUri] = useState();
  const classes = useStyles({});

  useEffect(async () => {
    const dataUriFetched = await toBase64(item.photo);
    setDataUri(dataUriFetched);
  }, [item]);

  return (
    <div className={classes.root}>
      <div className={classes.imgContainer}>
        {dataUri && <img className={classes.img} src={dataUri.toString()} />}
      </div>
    </div>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。