context.params.id 在 nextjs 中给出错误。无法定义未定义的属性“id”

Question

我试图从在 localhost:8000/response.json 中运行的 json 文件 (response.json) 中获取数据。 这是我在 pages/test.js 中的代码：

import React from "react";
import Link from "next/link";
import Image from "next/image";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import _ from "lodash"

// components

import Navbar from "components/Navbars/AuthNavbar.js";
import Footer from "components/Footers/Footer.js";

export const getStaticPaths = async () => {
  const res = await fetch("http://localhost:8000/response.json");
  const data = await res.json();

  const paths = data.data.map((gallery) => {
    return {
      params: { id: gallery.id },
    };
  });

  return {
    paths: paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  
  const id = context.params.id;
  const res = await fetch("http://localhost:8000/response1.json");
  const data = await res.json();
  
  const thumbnail_ = data.data.filter(parentid => parentid.parent_id == id)
  return {
    props: { image_data: thumbnail_ },
  };
  
};


export default function Landing({ image_data }) {
    console.log(image_data)
    return (
    <div>
    </div>
);
}

我的 response.json 文件：

{
    "data": [
        {
            "collection": null,
            "id": 1,
            "image_thumbanil": "https://images.pexels.com/photos/434090/pexels-photo-434090.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Animals",
            "title": "Animals"
        },
        {
            "collection": null,
            "id": 2,
            "image_thumbanil": "https://images.pexels.com/photos/5703286/pexels-photo-5703286.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Birds",
            "title": "Birds"
        },
        {
            "collection": null,
            "id": 3,
            "image_thumbanil": "https://images.pexels.com/photos/3802510/pexels-photo-3802510.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Car",
            "title": "Cars"
        },
        {
            "collection": null,
            "id": 4,
            "image_thumbanil": "https://images.pexels.com/photos/40904/bmw-k-1300-metallic-motorcycle-40904.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Bikes",
            "title": "Bikes"
        },
        {
            "collection": null,
            "id": 5,
            "image_thumbanil": "https://images.pexels.com/photos/3220368/pexels-photo-3220368.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Fishes",
            "title": "Fishes"
        },
        {
            "collection": null,
            "id": 6,
            "image_thumbanil": "https://images.pexels.com/photos/1040880/pexels-photo-1040880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Actors",
            "title": "Actors"
        },
        {
            "collection": null,
            "id": 7,
            "image_thumbanil": "https://images.pexels.com/photos/6896193/pexels-photo-6896193.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Actresses",
            "title": "Actresses"
        },
        {
            "collection": null,
            "id": 8,
            "image_thumbanil": "https://images.pexels.com/photos/37859/sailing-ship-vessel-boat-sea-37859.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            "images_id": null,
            "item": null,
            "name": "Ships",
            "title": "Ships"
        }
    ]
}

得到的错误是： TypeError：无法读取未定义的属性“id”

我的目标是显示 parent_id = 1 的图像，我希望每次程序运行时该 id 都增加 1。例如）当我运行下一个应用程序时，我想获得 parent_id = 1 然后是 2 的显示项目，依此类推..

Answer 1

如果您在页面中使用来自 getStaticProps 的参数，您的 js 文件必须命名为又名 [id].js。

文档here.