0

我正在创建一个网站来展示使用 NextJs 的产品。我需要将数据从页面传递到动态页面。所有数据都是一个 json 对象数组，位于项目内的数据文件夹中。我想列出 pages/rolls/index.jsx 中的所有对象，当单击一个对象对应的“了解更多”链接按钮时，我会转到更详细的页面版本。我无法使用 next/link 和 useRouter 让它工作，所以这就是我所做的。我的项目结构是：

- data
  - rollData.json
- pages
  - rolls
    - [rolldetail].jsx
    - index.jsx

// rollData.json

[
    {
        "name": "8\" x 0.080\" x 300'",
        "price": 300,
        "product_id": "PL8080300",
        "image": "/8flat.webp",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
        "name": "12\" x 0.080\" x 300'",
        "price": 450,
        "product_id": "PL12080300",
        "image": "/12flat.webp",
        "description": "Ac turpis egestas sed tempus urna et pharetra"
    }
]

// rolls.jsx

import rollsdata from '../../data/rollData.json'

const Rolls = () => {
  return (
    <main>
      {rolls.map((roll) => {
          return (
            <div key={roll.product_id}>

              <h2>{roll.name}</h2>

                <h3>
                  Description
                </h3>
                <p>{`${roll.description.slice(0, 163)}.`}</p>

              <div>
                <span>Price</span>
                <span>{`$${roll.price.toFixed(
                  2
                )}`}</span>
              </div>

                <Link href={`/rolls/${encodeURIComponent(roll.product_id)}`}>
                  <a>click</a>
                </Link>

            </div>
          )
        })}
    </main>
  )
}

// [rollDetail].js
import { useRouter } from 'next/router'
import rolls from '../../data/rolls.json'

const RollDetail = () => {
  const router = useRouter()

  const roll = rolls[router.query.rolldetail]

  console.log(roll)
  return (
    <div>
      <h2>Roll detail</h2>
      <p>{roll.name}</p>
      <p>{roll.description}</p>
    </div>
  )
}

export default RollDetail

它给了我错误：

Uncaught TypeError: roll is undefined

我不明白如何使用路由器来显示特定的滚动对象，有人可以告诉我我做错了什么以及如何实现它吗？我应该使用 getStaticProps 和 getStaticRoute 吗？

4

0 回答 0