getStaticPaths和getStaticProps返回任何东西

Question

我是nextJS的初学者，这是我第一次尝试使用getStaticPaths和getStaticProps，有人能帮助我解决这个问题吗?

const datas = [
{
id: 1,
name: "Banheiro",
image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/BANHEIRO/3_oyr2yf.jpg",
},
{
id: 2,
name: "Cozinha",
image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/COZINHA/2_aenaut.jpg",
}];

export const getStaticPaths = async () => {
const paths = datas.map(mod => {
return { params: { id: mod.id.toString() } }
});
return { paths, fallback: false }
}

export const getStaticProps = async (context) => {
const id = context.params.id;
const data = datas.filter((mod) => mod.id.toString() === id)
return {
props: {
datas: data
}
}
}

export default function Projects({ datas }) {
return (
<>
<h1>
{datas.id}
</h1>
</>
)
}

数据。我没有返回任何东西，整个页面都是白色的…😔

Answer 1

在本例中，我应该使用像这样的映射函数

const datas = [
{
id: 1,
name: "Banheiro",
image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/BANHEIRO/3_oyr2yf.jpg",
},
{
id: 2,
name: "Cozinha",
image: "https://res.cloudinary.com/djf0isef7/image/upload/v1635023151/public/RENDERS/PROJETO%20RNT/COZINHA/2_aenaut.jpg",
}];


export const getStaticPaths = async () => {
const paths = datas.map(mod => {
return { params: { id: mod.id.toString() } }
});
return { paths, fallback: false }
}

export const getStaticProps = async (context) => {
const id = context.params.id;
const data = datas.filter((mod) => mod.id.toString() === id)
return {
props: {
datas: data
}
}
}

export default function Projects({ datas }) {
return (
<>
{datas.map((data) =>
<h1>
{data.id}
</h1>
)}
</>
)
}