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

Posted 2023-03-30

【中文标题】从 getStaticProps 迭代对象并在组件模板中显示

【英文标题】：Iterating object from getStaticProps and displaying in component template

【发布时间】：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.

下面是响应的样子：

【参考方案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>