0

我将一个 json 文件导入我的 react 应用程序（使用 next.js 路由器），并且需要通过 URL 中的参数访问其中的一个字段。当我从另一个页面导航时它可以工作，但当我刷新页面或直接访问它时它(/home -> /annotations/<some id>)不起作用。(/annotations/<some id>)

JSON：

{
  "page1-9.svg": {
    "points": [
      ...
    ],
    "viewBox": "0 0 191.2066944434739 163.20512234635925"
  },
...
}

import tangrams from "../../assets/tangrams.json";
//..other imports

export default function Annotations(props) {
  const classes = useStyles();
  const router = useRouter();
  const { tangramId } = router.query;

  console.log(tangrams[tangramId]); // this always works
  console.log(tangrams[tangramId]["viewBox"]); // server error: TypeError: Cannot read property 'viewBox' of undefined
  return (...

如果我只访问tangrams[tangramId]，它可以正常工作，但如果我访问tangrams[tangramId]["viewBox"]，它会抛出server error: TypeError: Cannot read property 'viewBox' of undefined.

知道为什么会这样吗？

4

1 回答 1

0

搜了一圈，好像和这个有关：github.com/vercel/next.js/discussions/11484

查询参数在第一次渲染时未定义...

于 2021-06-14T18:17:59.660 回答