NextJS中map遍历数组无法渲染内容问题求助

你的问题核心是异步请求的时机处理错误：你在useEffect里循环发起异步API调用，但这些请求还没返回数据时，就已经执行了setUserSubs(subArray)，此时subArray还是空数组。后续异步请求完成后，你往subArray里push数据，但这个数组是普通变量，不会触发组件重新渲染，所以页面上看不到内容。

修改后的代码 #

export default function Subs() {
  const { profile } = useProfileContext()
  const [userSubs, setUserSubs] = useState([]) // 初始化为空数组，避免可选链冗余

  useEffect(() => {
    // 先判断列表是否存在，避免空值报错
    if (!profile?.subIdList?.length) return

    // 收集所有API请求的Promise实例
    const fetchTasks = profile.subIdList.map(subId => 
      queryData(subId.trim())
    )

    // 等待所有请求完成后，统一更新状态
    Promise.all(fetchTasks).then(allData => {
      setUserSubs(allData)
    })
  }, [profile]) // 添加profile作为依赖，确保列表变化时重新拉取数据

  return (
     <>
       top
       {userSubs.map((x, index) => (
         // 必须给列表项加唯一key，优先用数据自带的唯一ID，这里临时用index替代
         <p key={index}>hello {JSON.stringify(x)}</p>
       ))}
       end
     </>
  )
}

关键修改点说明 #

1. 用Promise.all处理异步请求：它会等待所有API请求完成后，返回包含所有结果的数组，确保拿到完整数据再更新状态。
2. 添加正确的依赖项：把profile加入useEffect的依赖数组，当用户的subIdList变化时，会重新触发数据拉取。
3. 初始化状态为数组：避免userSubs为undefined，可以直接调用map方法，不用额外的可选链判断。
4. 添加列表项key：这是React列表渲染的要求，能避免渲染警告，提升渲染性能。

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