处理页面 NextJS 文件中的异步数据

Question

我有一个网页可以从 SpaceX graphQL API 中提取发射数据，然后将该数据呈现为列表。用户可以单击该列表中的特定发布，将他们带到有关该特定发布的 'details' 页面。
在详细信息页面上，我尝试使用 useRouter 从 URL 中提取参数。将此参数值注销到浏览器后，我发现它最初记录为 undefined，然后在记录正确数据后不久 - 我假设这是某种异步问题。
我需要另一个 API 调用的参数，但是如果它没有立即加载，我就不能这样做 - 我已经尝试将它放入 async/await 函数中，但它没有帮助。建议？

详情页：[参数].js

import { useRouter } from 'next/router'
import { useContext,useState,useEffect } from 'react'
import { LaunchContext } from '../spacexContext'

const Items =   () => {
    const data =  useContext(LaunchContext)
    const router = useRouter()
    console.log(router.query.paramter)
    
        const getLaunchData = async () => {
            const [ launchData,setLaunchData ] = useState([])
            let parameters = await router.query.parameter
            setLaunchData(parameters)
            return launchData
        }

       const parameter =  getLaunchData()


    return ( 
        <div>
            this is items
        </div>
     );
}
 
export default Items;

当我重定向到 /launchesPast 路由

时，在浏览器中包含了控制台的屏幕截图

Answer 1

这是由 Automatic Static Optimization 的工作方式引起的：

Pages that are statically optimized by Automatic Static Optimization will be hydrated without their route parameters provided, i.e query will be an empty object ({}).

After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

参数未定义时可以returnnull，也可以尝试本期分享的一些解决方案：https://github.com/vercel/next.js/discussions/11484

处理页面 NextJS 文件中的异步数据

Handling aysnc data in a page NetxJS file

reactjs

next.js