NextJS中如何使用异步函数返回的数据初始化组件state

两种错误写法的核心问题：

• 直接将getAllProducts()作为useState初始值时，异步函数返回值永远是Promise实例，不会自动等待resolve出最终的Set结果，首次渲染时状态自然是undefined
• 之前尝试的then嵌套useEffect写法违反React Hooks调用规则：Hooks只能在组件顶层作用域调用，不能包裹在异步回调、条件分支内；且将productsShow作为useEffect依赖会触发无限重渲染循环。

方案1：客户端组件（Client Component）标准实现 #

如果你的Catalog组件包含浏览器交互逻辑、必须标记'use client'作为客户端组件运行，使用顶层useEffect处理异步初始化即可，同时补全加载状态避免渲染报错：

'use client'
import { useState, useEffect } from 'react'
import { getAllProducts } from '@/api/product' // 替换为你的实际方法路径

export default function Catalog() {
  // 初始值传入同类型空Set，避免首次渲染调用Set方法触发类型错误
  const [productsShow, setProductsShow] = useState(new Set())
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 异步逻辑直接放在useEffect回调内部，不要在外层包裹then
    const initData = async () => {
      try {
        const productSet = await getAllProducts()
        setProductsShow(productSet)
      } catch (err) {
        console.error('商品列表加载失败:', err)
      } finally {
        setLoading(false)
      }
    }
    initData()
  // 空依赖数组，保证初始化逻辑仅在组件首次挂载时执行1次
  }, [])

  if (loading) return <div>商品加载中...</div>

  return (
    <div>
      共{productsShow.size}件商品
      {/* 其余渲染逻辑 */}
    </div>
  )
}

写法注意点 #

• 所有Hooks必须在组件顶层作用域调用，不能嵌套在异步回调、条件判断中
• 不要将被更新的状态本身传入useEffect依赖数组，否则会触发「更新→重渲染→触发effect→更新」的死循环
• 异步状态必须匹配对应类型的初始空值，不要留undefined导致首次渲染访问属性/方法报错

方案2：NextJS服务端组件实现（推荐，NextJS专属） #

NextJS App Router下默认组件为服务端组件，原生支持异步组件能力，不需要等客户端挂载后再请求数据，首屏无加载闪烁、SEO效果更好：
首先在服务端层获取数据，将结果作为props传递给客户端交互组件：

// 父级页面为服务端组件，不需要加'use client'
import { getAllProducts } from '@/api/product'
import CatalogClient from './CatalogClient'

export default async function CatalogPage() {
  // 服务端渲染阶段直接await拿到异步结果，不需要等待客户端hydrate
  const initialProducts = await getAllProducts()
  return <CatalogClient initialProducts={initialProducts} />
}

客户端组件直接接收props作为状态初始值即可，不存在异步时序问题：

'use client'
import { useState } from 'react'

export default function CatalogClient({ initialProducts }) {
  // 直接使用服务端预取的结果初始化，无undefined问题
  const [productsShow, setProductsShow] = useState(initialProducts)

  return (
    <div>
      共{productsShow.size}件商品
      {/* 其余渲染、交互逻辑 */}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者engineer-x