如何从异步方法输出值

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 函数仍然返回一个承诺，就像你正在调用的那个一样。你需要从根本上重构你的 React 组件。要么：

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

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

您需要这样做才能让异步操作有时间完成。在执行此操作的任何组件中，您都可以在调用getAssetByIdAsync 时使用.then 和.catch，以处理它返回的承诺的履行或拒绝。