javascript - Why would a query param be undefined in NextJS? - Stack Overflow

admin管理员组

文章数量:1345139

I'm calling a page withRouter(Page) and expect the variable for the page (the page is called [category].js) to be present on initial page load. Query itself is there, the key is there, but the value is 'undefined.' There seem to be a few calls to getInitialProps on the server side with 2/3 being undefined.

The react ponent has a constructor, etc. it's not a functional ponent.

This is my current 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 }
}

I'm calling a page withRouter(Page) and expect the variable for the page (the page is called [category].js) to be present on initial page load. Query itself is there, the key is there, but the value is 'undefined.' There seem to be a few calls to getInitialProps on the server side with 2/3 being undefined.

The react ponent has a constructor, etc. it's not a functional ponent.

This is my current 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 }
}

• javascript
• reactjs
• next.js

Share Follow asked Aug 13, 2019 at 23:15 ThingamajigThingamajig 4,46788 gold badges3636 silver badges6666 bronze badges 1

• 1 Appears getInitialProps is being called twice, not sure why that would be the case. Once with the data, once without. – Thingamajig Commented Aug 13, 2019 at 23:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This might be redundant at this point, but I ran into this as well and found the docs explain this 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.

You might try this instead:

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

This way it gets the query params when rendering server side, so they're instantly available.

For others who use express custom server, to fix the undefined params, we have to set the dynamic route at server.js as follow:

# server.js
...

app.prepare().then(() => {
  const server = express();
  ....

  server.get('/product/:category', (req, res) => {
    const { category } = req.params;
    return app.render(req, res, `/product/${category}`, req.query)
  })
  
  ...
}

And then, as Valentijn answers, we can get the category params.

# pages/product/[category].js
....

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

...

The key is dynamic path /product/${category}. Don't use /product/:category

本文标签： javascriptWhy would a query param be undefined in NextJSStack Overflow