为什么 NextJS 中查询参数未定义？

Question

我正在使用 Router(Page) 调用页面，并期望该页面的变量（该页面称为 [category].js）出现在初始页面加载时。查询本身在那里，键在那里，但值是“未定义”。服务器端似乎有一些对 getInitialProps 的调用，其中 2/3 未定义。

React组件有构造函数等，它不是函数式组件。

这是我当前的 getInitialProps：

Category.getInitialProps = async ({ req, query }) => {
  let authUser = req && req.session && req.session.authUser
  let categoryData = {}
  let categoryItemData = {}
  let category = query.category
  if(category){
    let res = await fetch(url1,
    {
        method: 'POST',
        credentials: 'include',
    })
    categoryData = await res.json();
    let categoryItemsRes =  await fetch(url2, 
        {
            method: 'POST',
            credentials: 'include',
        })
    categoryItemData = await categoryItemsRes.json();
  }

  return { query, authUser, categoryData, categoryItemData }
}

Answer 1

在这一点上这可能是多余的，但我也遇到了这个问题并发现文档在这里解释了这一点

在预渲染期间，路由器的查询对象将为空，因为我们在此阶段没有要提供的查询信息。水合后，Next.js 将触发应用程序更新，以在查询对象中提供路由参数。

你可以尝试这个：

export async function getServerSideProps(ctx) {
  const { id } = ctx.query;
  return {
    props: {
      id,
    },
  };
}

这样它就可以在渲染服务器端时获取查询参数，因此它们可以立即可用。