Блог

Я пытаюсь извлечь данные из файла json (response.json), который выполняется в localhost:8000 / 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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;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=compressamp;cs=tinysrgbamp;dpr=1amp;w=500",
            "images_id": null,
            "item": null,
            "name": "Ships",
            "title": "Ships"
        }
    ]
}
 

Ошибка в том, что get is:
Ошибка типа: не удается прочитать свойство ‘id’ неопределенного

Моя цель — отображать изображения с parent_id = 1, я хочу, чтобы этот идентификатор увеличивался на единицу при каждом запуске программы. Например.) когда я запускаю следующее приложение, я хочу получить элементы отображения с parent_id = 1, а затем 2 и так далее..

Если вы используете параметры из getStaticProps страницы, ваш js-файл должен быть назван иначе [id].js .

Документ здесь.