React中如何在JSX内使用Promise函数？多异步场景必须用useState吗

问题解答 #

为什么你提供的示例写法无法达到预期效果 #

React 组件的渲染是同步执行的，return 语句执行时不会等待 Promise 状态变更完成。直接在 JSX 中嵌入 Promise 实例，最终渲染出来的会是 Promise 对象本身，而非你期望的 resolve 之后的返回值。

是否必须使用 useState 实现该需求 #

不是必须，但 useState + useEffect 是 React 官方原生支持的方案，稳定性、可读性和可维护性都是最高的，适合绝大多数业务场景。就算你需要处理多个 Promise ，也可以通过封装自定义 Hook 大幅简化重复代码，不需要每个请求都单独写重复的 state 声明和副作用逻辑。
除此之外你也可以选择 Suspense + 异步组件的实现方案，但该方案要求你的异步逻辑适配 Suspense 约定，使用门槛更高，小范围场景下远不如 state 方案灵活易维护。

多 Promise 处理示例 #

基础实现方案

import { useState, useEffect } from 'react'

function MyComp () {
  // 多个异步结果可以用多个state分别存储
  const [avatarUrl, setAvatarUrl] = useState('')
  const [bannerUrl, setBannerUrl] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 多个异步可以用Promise.all批量处理
    Promise.all([
      getFirebasePromise(avatarRef),
      getFirebasePromise(bannerRef)
    ]).then(([avatarRes, bannerRes]) => {
      setAvatarUrl(avatarRes)
      setBannerUrl(bannerRes)
    }).finally(() => {
      setLoading(false)
    })
  }, [])

  // 加载过程可以自定义兜底展示
  if (loading) return <div>资源加载中...</div>

  return (
    <div>
      <div>头像地址：{avatarUrl}</div>
      <div>横幅地址：{bannerUrl}</div>
    </div>
  )
}

封装自定义 Hook 简化多请求逻辑

如果项目里需要大量处理类似的异步请求场景，可以封装通用的自定义 Hook 减少重复代码：

import { useState, useEffect } from 'react'

// 通用异步请求Hook
const useAsyncData = (fetchFn, deps = []) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    setLoading(true)
    fetchFn()
      .then(res => setData(res))
      .catch(err => setError(err))
      .finally(() => setLoading(false))
  }, deps)

  return { data, loading, error }
}

// 组件内使用
function MyComp () {
  const { data: avatarUrl, loading: avatarLoading } = useAsyncData(() => getFirebasePromise(avatarRef), [])
  const { data: bannerUrl, loading: bannerLoading } = useAsyncData(() => getFirebasePromise(bannerRef), [])

  if (avatarLoading || bannerLoading) return <div>资源加载中...</div>

  return (
    <div>
      <div>头像地址：{avatarUrl}</div>
      <div>横幅地址：{bannerUrl}</div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者user17143939