React - 在 JSX 中使用异步函数进行渲染？答案

【问题标题】：React - Use async function for rendering in JSX?React - 在 JSX 中使用异步函数进行渲染？
【发布时间】：2021-12-09 20:34:21
【问题描述】：

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

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

所以结果是：

<div>urlFromFirebase</div>

即使我在同一个组件中有多个 Promise，我是否必须使用 useState()？

【问题讨论】：

你不能在那里使用承诺，它可能在第一次渲染时还不存在

标签： reactjs promise jsx firebase-storage es6-promise

【解决方案1】：

您可以使用useState 和useEffect 来做到这一点。

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

【讨论】：