问如何将帖子项目ID传递到getInitialProps？
EN

Stack Overflow用户

提问于 2019-05-24 19:53:33

回答 1查看 594关注 0票数 0

我刚接触Next.js，在获取从索引页面传递到post页面getInitialProps()函数的post ID时遇到了麻烦。正在使用链接组件请求页面。

最终目标是将post ID放入post.js getInitialProps函数中，以便请求正确的json文件，如下所示：

https://www.example.com/menu/100.json <- id = 100

JSON API端点在浏览器中都能正常工作，索引页面也能在nextjs中工作。

到目前为止，我已经尝试了几个print语句来查找这个Link href属性的传递位置，但是我还不能访问href中的"itemid“。

有3个主要文件可以重现这一点：

index.js

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Pages</h1>
    <ul>
{props.results.map(result => (
        <li key={result.id}>
          <Link as={`/${result.slug}`} href={`/post?itemid=${result.id}`}>
            <a>{result.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const res = await fetch('https://www.example.com/menu.json')
  const data = await res.json()

  return {
    results: data['data'].map(data => data)
  }
}

export default Index

server.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

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

    server.get('/:id*', (req, res) => {
      const actualPage = '/post'
      const queryParams = { slug: req.params.id + req.params[0]}
      app.render(req, res, actualPage, queryParams)
    })


    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(3000, err => {
      if (err) throw err
      console.log('> Ready on http://localhost:3000')
    })
  })
  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })

post.js

import { withRouter } from 'next/router'
import Layout from '../components/MyLayout.js'
import fetch from 'isomorphic-unfetch'

const Post = props => (
  <Layout>
    <h1>{props.result.title}</h1>
    <p>{props.result.bodyCopy.replace(/<[/]?p>/g, '')}</p>
    <img src={props.result.image} />
  </Layout>
)

Post.getInitialProps = async function(context) {
  const { itemid } = context.query

  const res = await fetch(`https://www.example.com/menu/${itemid}.json`)
  const result = await res.json()

  return { result }
}

export default withRouter(Post)

以下是我希望发生的事情：

用户请求：https://www.example.com/some-page "some-page“的帖子ID为100

服务器在被请求/刷新的页面上同时获得"some- page“和"100”。

服务器将API调用到：https://www.example.com/menu/100.json

到目前为止，我得到的最好结果是将API url设置为：

https://www.example.com/menu/some-page.json

此终结点无效，因为ID未请求它。

express

next.js

node.js

回答 1

Stack Overflow用户

发布于 2019-05-27 08:03:44

请尝试一下这是否如您所期望的那样工作？

Index.js

import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Index = (props) => (
  <Layout>
    <h1>Pages</h1>
    <ul>
{props.results.map(result => (
        <li key={result.id}>
          <Link as={`/${result.slug}/${result.id}`} href={`/post?itemid=${result.id}`}>
            <a>{result.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  </Layout>
)

Index.getInitialProps = async function() {
  const res = await fetch('https://www.example.com/menu.json')
  const data = await res.json()

  return {
    results: data['data'].map(data => data)
  }
}

export default Index

Server.js

const express = require('express')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

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

    server.get('/:slug/:id*', (req, res) => {
      const actualPage = '/post'
      const queryParams = { slug: req.params.slug, itemid: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })


    server.get('*', (req, res) => {
      return handle(req, res)
    })

    server.listen(3000, err => {
      if (err) throw err
      console.log('> Ready on http://localhost:3000')
    })
  })
  .catch(ex => {
    console.error(ex.stack)
    process.exit(1)
  })

Post.js

import { withRouter } from 'next/router'
import Layout from '../components/MyLayout.js'
import fetch from 'isomorphic-unfetch'

const Post = props => (
  <Layout>
    <h1>{props.result.title}</h1>
    <p>{props.result.bodyCopy.replace(/<[/]?p>/g, '')}</p>
    <img src={props.result.image} />
  </Layout>
)

Post.getInitialProps = async function(context) {
  const { itemid } = context.query

  const res = await fetch(`https://www.example.com/menu/${itemid}.json`)
  const result = await res.json()

  return { result }
}

export default withRouter(Post)