我试图在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>
);
}
2条答案
按热度按时间9fkzdhlc1#
我得到了它为我工作后,删除了功能组件的dcdc
bmvo0sr52#
在使用此命令更新NextJS和相关库后,我获得了在客户端组件上工作的
{params}
属性如图所示https://nextjs.org/docs/pages/building-your-application/upgrading/version-13
从NextJS Github repo中的一些评论中得到了这个想法,比如这个:https://github.com/vercel/next.js/discussions/43577#discussioncomment-7153856