我对'getStaticPaths'功能有问题。必需的参数 (id) 未在 getStaticPath 中作为字符串提供



我的"getStaticPaths"函数有问题。在getStaticPaths中未将必需的参数(id(作为字符串提供。甚至我也使用过id:users.id.toString((

export default function usersID({ users }) {
return (
<div>
<h1> {mobile.name} </h1>
</div>
);
}
export const getStaticPaths = async () => {
const res = await fetch(`http://jsonplaceholder.typicode.com/users`);
const data = await res.json();
const paths = data.map((users) => {
return {
params: {
id: users.id.toString()
},
};
});
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const id = context.params.id;
const res = await fetch(`http://jsonplaceholder.typicode.com/users/${params.id}` );
const data = await res.json();
return {
props: { users: data },
};
};

我这边没有错误,只是在getStaticProps中它不是params.id而是id

文件夹结构为

---用户----->[id].js

使用id 2可从my_url.example/user/2 访问

//[id].js
import React from "react";
const User = ({ users }) => {
console.log(users);
return <div>user</div>;
};
export const getStaticPaths = async () => {
const res = await fetch(`http://jsonplaceholder.typicode.com/users`);
const data = await res.json();
const paths = data.map((users) => {
return {
params: {
id: users.id.toString(),
},
};
});
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const id = context.params.id;
const res = await fetch(`http://jsonplaceholder.typicode.com/users/${id}`);
const data = await res.json();
return {
props: { users: data },
};
};
export default User;

最新更新