nextjs 从 GetStaticProps 迭代对象并显示在组件模板中

如何解决nextjs 从 GetStaticProps 迭代对象并显示在组件模板中

我正在尝试显示使用 GetStaticProps 进行的数据库提取的结果，但是当我在组件模板中映射对象时，出现以下错误。我想显示返回数据中的所有数据。

我的代码：

import React from "react"
import { GetStaticProps } from "next"

// pages/index.tsx
import prisma from '../lib/prisma'

export const getStaticProps: GetStaticProps = async () => {
  const tracks = await prisma.tracks.findMany();
  return { props: { tracks } };
};

const Tracks = ({ tracks }) => {
  console.log(tracks)

  return (
    <div>
      <h1>All Tracks</h1>
      {tracks.map((track ) => (
        <div>{track.ts}</div>
        ))}
   </div>
  );
}

export default Tracks;

错误：

Unhandled Runtime Error

Error: Objects are not valid as a React child (found: Sat Jun 27 2020 17:43:15 GMT-0500 (Central Daylight Time)). If you meant to render a collection of children,use an array instead.

这是响应的样子：

解决方法

track.ts 是一个 Date 类型，基本上是一个 object。您不能只在 JSX 中渲染 Date 对象。您需要将其转换为字符串或数字，例如：

const Tracks = ({ tracks }) => {
  console.log(tracks)

  return (
    <div>
      <h1>All Tracks</h1>
      {tracks.map((track ) => (
        <div>{String(track.ts)}</div>
        ))}
   </div>
  );
}

,

试试这个

<div>{JSON.stringify(track)}</div>