无法解构“params”的属性“id”,因为它在Next.js 13.4中未定义

qmelpv7a  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(88)

我试图在Next.js 13.4中获取[id] URL参数,但我得到一个错误,说params未定义。
我一直在互联网上搜索并要求ChatGPT,但我找到的都是Next.js旧版本的代码,而不是Next.js 13.2+的新功能。
我从另一个项目中得到了这个代码示例,它工作得很好:

import Link from "next/link";

const fetchPost = (id) => {
  return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    next: { revalidate: 60 },
  }).then((res) => res.json());
};

export default async function Post({ children, params }) {
  const { id } = params;
  const post = await fetchPost(id);
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <Link href={`/posts/${id}/comments`}>View comments</Link>
      {children}
    </article>
  );
}

但是当我尝试将其调整到我的代码中时,它不起作用。
这是我的原始代码:(端点工作正常)

import styles from "./Post.module.css";

async function fetchPostById(id) {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`);
  const post = await response.json();
  return post;
}

export default async function Post({ params }) {
  const { id } = params;
  const postById = await fetchPostById(id);
  console.log("Params: " + params);
  return (
    <>
      <li className={styles.li} key={postById.id}>
        <p className={styles.a}>
          <h3>{postById.title}</h3>
          <p>{postById.body}</p>
        </p>
      </li>
    </>
  );
}

我有这样的配置:

{
  "name": "demo-paco",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.4",
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "20.2.5",
    "@types/react": "18.2.8"
  }
}

我得到这个错误:
- error app\posts\[id]\Post.jsx (10:10) @ id
- error TypeError: Cannot destructure property 'id' of 'params' as it is undefined. at Post (./app/posts/[id]/Post.jsx:17:13) at stringify (<anonymous>)
我设法让它工作,但在const params = useParams();行中,我得到了这个错误:TypeError: Cannot read properties of null (reading 'useContext')
更新代码:

"use client";

import { useParams } from "next/navigation";
import styles from "./Post.module.css";

async function fetchPostById(id) {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`);
  const post = await response.json();
  return post;
}

export default async function Post() {
  const params = useParams();
  const id = params.id;
  const postById = await fetchPostById(id);
  return (
    <>
      <li className={styles.li} key={postById.id}>
        <p className={styles.a}>
          <h3>{postById.title}</h3>
          <p>{postById.body}</p>
        </p>
      </li>
    </>
  );
}

更新GLHF代码:
/app/posts/[id]内部的page.jsx

import Link from "next/link";
import PostById from "./PostById";
import CommentsByPostId from "./CommentsByPostId";

export default async function PostPage({ params }) {
  const { id } = params;
  return (
    <section className="main">
      <Link className="goBack" href={"/posts"}>
        Go back
      </Link>
      <h1>Post:</h1>
      <PostById id={id} />
      <h1>Comments:</h1>
      <CommentsByPostId id={id} />
    </section>
  );
}

/app/posts/[id]内部的PostById.jsx

import styles from "./PostById.module.css";

async function fetchPost(id) {
  const response = await fetch(`http://localhost:3000/api/posts/${id}`);
  const courses = await response.json();
  return courses;
}

export default async function PostById({ id }) {
  const post = await fetchPost(id);
  return (
    <article>
      {
        <li className={styles.li} key={post.id}>
          <h3 className={styles.colorBlack}>{post.title}</h3>
          <p className={styles.colorBlack}>{post.body}</p>
        </li>
      }
    </article>
  );
}
9fkzdhlc

9fkzdhlc1#

我得到了它为我工作后,删除了功能组件的dcdc

bmvo0sr5

bmvo0sr52#

在使用此命令更新NextJS和相关库后,我获得了在客户端组件上工作的{params}属性

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

如图所示https://nextjs.org/docs/pages/building-your-application/upgrading/version-13
从NextJS Github repo中的一些评论中得到了这个想法,比如这个:https://github.com/vercel/next.js/discussions/43577#discussioncomment-7153856

相关问题