javascript - 为什么 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

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

During prerendering, the router's query object will be empty since we do not have query information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object.

你可以试试这个:

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

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