我有一个渲染图像的功能组件,我正在获取一个 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>
)
}
如有任何帮助,我们将不胜感激。
最佳答案
您应该尝试将逻辑移至 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>
);
}
关于reactjs - 等待功能组件中的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58745082/