难以MapJSON文件,(NextJS,Typescript)

1aaf6o9v  于 2023-05-17  发布在  TypeScript
关注(0)|答案(1)|浏览(133)

我对JS非常陌生,并试图了解如何将json文件的内容Map到html元素。
当我在dev服务器上运行时,我得到以下错误:”props.books.map不是函数”
我的直觉猜测是,我的json文件的格式与.map需要的格式不一致。(我不完全确定静态JSON文件应该是什么样子的。我一直在网上看到不同的例子,所以如果有人有资源,什么行业标准的json文件应该是什么样子的,那就太好了!)
这是我的json文件的一个片段。
./static/bookReviews.json
下面是试图Mapjson文件的文件代码。

  • ./pages/content/books.tsx*
import NavBar from "@/components/NavBar";
import { NextPage, GetStaticProps } from "next";

const Books: NextPage<{
  books: {
    author: string;
    dateFinish: string;
    dateStart: string;
    rating: string;
    review: string;
    title: string;
  }[];
}> = (props) => {
  return (
    <div className="justify-between items-center bg-gradient-to-b from-slate-600 to-slate-900 p-10 w-screen h-screen">
      <NavBar />
      <h1>Books</h1>
      

      {props.books.map((x) => {
        return <p>{x.title}</p>;
      })}
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const books = (await import("../../static/bookReviews.json")).default;

  return {
    props: { books },
  };
};

export default Books;

请让我知道,如果任何进一步的信息是需要了解这个问题。
任何帮助都非常感谢:)

rkttyhzu

rkttyhzu1#

我想出来了!当我导入json文件时,我没有指定Books组件。如果查看json文件,键是“Books”,其值是包含图书信息的字典数组。因此,一旦我指定了数组,.map函数就可以正常工作了。
我做的改变是

const books = ((await import("../../static/bookReviews.json")).Books);

谢谢你@crashmstr为我指明了正确的方向!

相关问题