在JSX中使用异步函数进行渲染？

Question

如何在组件返回中使用promise函数，如下所示：

function MyComp () {
 return (
  <div>
   {getFirebasePromise(ref).then(url => return url)}
  </div>
 )
}

因此，结果将是：

<div>urlFromFirebase</div>

即使我在同一个组件中有几个promise，我也必须使用useState（）？

Answer 1

您可以使用useState和useffect来执行此操作。

function MyComp () {
    [url, setUrl] = useState("");
    useEffect(()=>{
        getFirebasePromise(ref).then(url => setUrl(url));
    });
    
    return (
        <div>
            {url}
        </div>
    )
}