Reactjs 等待功能组件中的功能

我有一个渲染图像的功能组件，我作为一个孩子得到了一个

文件

道具，需要将其转换为图像源的

数据URI

，但是我不知道如何在非异步函数中等待

 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>
  )
}

const toBase64=文件=>
新承诺（（解决、拒绝）=>{
const reader=new FileReader（）
reader.readAsDataURL（文件）
reader.onload=（）=>解析（reader.result）
reader.onerror=错误=>拒绝（错误）
})
导出默认函数打印（{item}）{
const classes=useStyles（{}）
const dataUri=wait toBase64（item.photo）//不能在此处使用wait
返回(
{dataUri&&}
)
}

---

任何帮助都将不胜感激。

您必须使您的函数异步。像这样：

export default async 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>
  )
}

导出默认异步函数打印（{item}）{
const classes=useStyles（{}）
const dataUri=wait toBase64（item.photo）//不能在此处使用wait
返回(
{dataUri&&}
)
}

---

现在，您应该能够毫无问题地使用wait。

您应该尝试将逻辑移动到

useffect

callback:

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>
  );
}

const toBase64=文件=>
新承诺（（解决、拒绝）=>{
const reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=（）=>resolve（reader.result）；
reader.onerror=错误=>拒绝（错误）；
});
导出默认函数打印（{item}）{
const[dataUri，setDataUri]=useState（）；
const classes=useStyles（{}）；
useffect（异步（）=>{
const dataUriFetched=wait toBase64（item.photo）；
setDataUri（dataUriFetched）；
}，[项目]；
返回(
{dataUri&&}
);
}

您可以这样使用它

const dataUri = async () => await toBase64(item.photo)

---

按照React文档中的建议，我最终做了以下工作-

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

---

当您有一个异步调用时，您应该使用useEffect钩子，并且您可以将第二个参数作为依赖的prop作为数组传递，因此如果任何prop仅发生更改，它将调用，如果不将数组作为第二个参数传递，它将在每次渲染后调用，如果传递空数组，它将只调用一次，就像componentDidMount生命周期一样。。希望这能更好地理解PBLM。请问另一个问题，因为它超出了范围，而且您没有用TS标记当前问题，这里也没有TS代码