如何从异步方法输出值

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 组件。任何一个：正在执行此操作的组件必须能够在它还没有结果时呈现getAssetByIdAsync（可能是一些“加载”占位符），或者在结果可用之前，根本不应该渲染该组件，这意味着getAssetByIdAsync在父组件而不是这个组件中进行调用。您需要这样做以便有时间完成异步操作。在执行此操作的任何组件中，您都可以在调用 to时使用.thenand来处理它返回的承诺的履行或拒绝。.catchgetAssetByIdAsync