时间戳

首页 > 解决方案 > 从 getStaticProps 迭代对象并在组件模板中显示

javascript - 从 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.

这是响应的样子：

在此处输入图像描述

标签： javascripttypescriptnext.jsprisma

解决方案

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

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

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

推荐阅读