从 getStaticProps 迭代对象并在组件模板中显示答案

【问题标题】：Iterating object from getStaticProps and displaying in component template从 getStaticProps 迭代对象并在组件模板中显示
【发布时间】：2021-10-02 12:00:22
【问题描述】：

我正在尝试显示发生在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.

下面是响应的样子：

【问题讨论】：

标签： javascript typescript next.js prisma

【解决方案1】：

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>
  );
}

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：