TypeError：无法读取未定义的属性（读取“加入”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'join')TypeError：无法读取未定义的属性（读取“加入”）
【发布时间】：2022-01-01 20:41:36
【问题描述】：

TypeError

import { useRouter } from "next/router";

export default function PostAll() {
  const router = useRouter();
  const { all } = router.query;

  return (
    <div>
      <h1>Post: {all.join("/")}</h1>
    </div>
  );
}

wait  - compiling...
event - compiled client and server successfully in 32 ms (176 modules)
error - pages/post/[...all].js (9:21) @ PostAll
TypeError: Cannot read properties of undefined (reading 'join')
   7 |   return (
   8 |     <div>
>  9 |       <h1>Post: {all.join("/")}</h1>
     |                     ^
  10 |     </div>
  11 |   );
  12 | }

{
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
}

我是一个非常初学者，我通过观看在线讲座来学习。我不太明白为什么我在这段短代码中遇到错误。

【问题讨论】：

标签： javascript reactjs join next.js typeerror

【解决方案1】：

router.query默认是一个空对象{}，所以const { all } = router.query;之后，all就是undefined。而且你不能在undefined 上调用join，因为错误告诉你。真正的问题是 OP 正在导航到“localhost:3000/post/hello/world”，但仍然出现空指针异常。原因是组件使用空对象预渲染，然后使用数组再次渲染。此行为在下面链接的文档中。 “如果页面没有数据获取要求，它 [query] 在预渲染期间将是一个空对象。”所以 OP 需要的只是一个空检查。

router 的文档是 here

return (
  <div>
    <h1>Post: {all && all.join("/")}</h1>
  </div>
);

【讨论】：

目的是在“localhost:3000/post/hello/world”中打印“Post: hello/world”，但是当我将“all”打印到控制台时，“undefined”和“[hello, world]”是打印在控制台中。但它输出为“Post: helloworld”，其中“all”用作“字符串”。
“当我将“all”打印到控制台时，“undefined”和“[hello, world]”会打印在控制台中是什么意思？打印出来的确切值是多少？
``` lang-js import { useRouter } from "next/router";导出默认函数 PostAll() { const router = useRouter();常量 { 全部 } = router.query;控制台.log（全部）； return (

Post: {Array.isArray(all) ? all.join("/") : all}

); } ``` 这样输入后，当我在“localhost:3000/post/hello/world”看到控制台日志时，控制台上打印了两个日志，undefined 和 ["hello", "world"]。
请阅读这部分文档：“如果页面没有数据获取要求，它[query] 在预渲染期间将是一个空对象。”该组件可能使用空对象预渲染，然后使用数组再次渲染。所以你需要的是一个空检查。我用一种方法更新了答案。
非常感谢。这是我的第一个问题，所以我在搜索如何提问时问了一个问题，您的友好回答非常有帮助。

Post: {Array.isArray(all) ? all.join("/") : all}