如何从异步方法输出值

Question

我想创建一个返回图像路径的异步方法，如下所示：const renderMasterThumb = async (masterAssetId) => {    const masterAsset = await getAssetByIdAsync(masterAssetId);    const path = masterAsset.path;    return path;  };然后我这样调用方法：<img    src={`images/${(async () => {    await getAssetByIdAsync(collection.masterAssetId);    })()}`}    alt="master thumb"/>但是，我得到了一个 Promise 对象，而不是图像路径：<img src="images/[object Promise]" alt="master thumb">有人知道我如何通过调用异步方法输出值（例如'bart.jpg'）吗？

Answer 1

你 JSX 中的匿名async函数仍然返回一个 promise，就像你调用的那个一样。你需要从根本上重构你的 React 组件。任何一个：

1. 正在执行此操作的组件必须能够在它还没有结果时呈现getAssetByIdAsync（可能是一些“加载”占位符），或者

2. 在结果可用之前，根本不应该渲染该组件，这意味着getAssetByIdAsync在父组件而不是这个组件中进行调用。

您需要这样做以便有时间完成异步操作。在执行此操作的任何组件中，您都可以在调用 to时使用.thenand来处理它返回的承诺的履行或拒绝。.catchgetAssetByIdAsync