reactjs - 等待功能组件中的功能

Question

我有一个渲染图像的功能组件，我正在获取一个 File prop 作为子项，需要将其转换为图像源的 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>
  )
}

如有任何帮助，我们将不胜感激。

Answer 1

您应该尝试将逻辑移至 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>
  );
}