我有一个 Next JS 项目,其静态 JSON 放置在 /pages/api/data.json 中,如下所示:
{
"Card": [
{ "title": "Title 1", "content": "Content 1" },
{ "title": "Title 2", "content": "Content 2" },
{ "title": "Title 3", "content": "Content 3" }
]
}
我试图从该 JSON 中获取内容以加载到几个部分中,如下所示:
import { Card } from "../api/data";
export const getStaticProps = async () => {
return {
props: { cardData: Card },
};
};
export default ({ cardData }) => (
<>
const card = cardData.title; console.log(cardData);
{ {cardData.map((cardData) => (
<div>
<h3>{cardData.title}</h3>
<p>{cardData.content}</p>
</div>
))}; }
</>
);
但我收到 Type: Undefined 错误,并且我很确定这不是该函数应有的样子。
另外,如果我想将其导出为可以在 index.js 中使用的组件,我是否必须命名导出默认函数?
回购链接在这里:https://github.com/DoctorSte/remoteOS https://github.com/DoctorSte/remoteOS
这里不需要 getStaticProps,Webpack 将在构建时为您捆绑 JSON。这是 contact.js 页面的一个工作示例:
import "tailwindcss/tailwind.css";
import Footer from "./components/footer";
import Form from "./components/form";
import Navbar from "./components/Navbar";
import Cards from "./api/data.json"
export default function Contact() {
console.log(Cards['Cards 1'][0].title); // Title 1
return (
<>
<Navbar />
<Form />
<Footer />
</>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)