我无法从 Next Js API 中的 JSON 对象获取 id

Question

data.js 在 API 文件夹中

export default {

    Trending : [
    
        {
    
            "data":[
    
           
    
           {
    
           
    
            "id":1,
    
           
    
            "attributes":{
    
           
    
            "Title":"Technical",
    
           
    
            "slug":"blog",
    
           
    
            "Description":"#Python\nPythonisasimplelanguageforstarters.",
    
           
    
            "Date":"2023-03-06",
    
           
    
            "Author":"Ankush",
    
           
    
            "createdAt":"2023-03-06T03:11:19.450Z",
    
           
    
            "updatedAt":"2023-03-06T03:11:21.956Z",
    
           
    
            "publishedAt":"2023-03-06T03:11:21.951Z",
    
           
    
            "locale":"en"
    
           
    
           }
    
           
    
           }
    
           
    
           ],
    
           
    
            "meta":{
    
           
    
            "pagination":{
    
           
    
            "page":1,
    
           
    
            "pageSize":25,
    
           
    
            "pageCount":1,
    
           
    
            "total":1
    
           
    
           }
    
           
    
           }
    
           
    
           }
    
    ]

}

trending.js

import data from './data'

// api/trending

export default function handler(req, res){

    const { Trending } = data;
    
    if(Trending) return res.status(200).json(Trending)
    
    return res.status(404).json({ error: "Data Not Found"})

}

**\[postId.js\]**

import data from "../data"

export default function handler(req,res){

    const{ postId }= req.query;
    
    const { Trending } = data;
    
    
    
    if(postId){
    
        const post = Trending.find( (value) => value.id == postId)
    
        return res.status(200).json(post)
    
    }
    
    
    
    return res.status(404).json({ error:"Post Not Found"})

}

在 slug 文件中，[postId] 我正在尝试获取 data.js 中的 id:1。但我无法得到它

我正在写这个 Next Js 博客，我必须从 JSON id 中获取详细信息，问题是当我在 [postId].js 文件中使用 find 它没有返回对象但没有错误我的意思是对象没有进来。所以帮助我以正确的方式访问数据。

Answer 1

请修复您的代码格式。

你的名字文件应该是 [postId].js 并且位于

pages/post/

文件夹下。

试试下面的代码：

import { useRouter } from "next/router";

const Post = () => {
  const router = useRouter();
  const { postId } = router.query;
  console.log("postId", postId);

  return ...;
};

export default Post;

用

localhost:YOUR_OWN_PORT/post/1

测试

Answer 2

你的id属性放错地方了

export default {
  Trending: [
    {
      id: 1,
      data: [
        {
          "attributes": {
            "Title": "Technical",
            "slug": "blog",
            "Description": "#Python\nPythonisasimplelanguageforstarters.",
            "Date": "2023-03-06",
            "Author": "Ankush",
            "createdAt": "2023-03-06T03:11:19.450Z",
            "updatedAt": "2023-03-06T03:11:21.956Z",
            "publishedAt": "2023-03-06T03:11:21.951Z",
            "locale": "en"
          }
        }
      ],
      "meta": {
        "pagination": {
          "page": 1,
          "pageSize": 25,
          "pageCount": 1,
          "total": 1
        }
      }
    }
  ]
}

然后在你的“[postId].js”中使用“find”来获取具有匹配id的帖子

从“../data”导入数据

export default function handler(req, res) {
  const { postId } = req.query;
  const { Trending } = data;
  
  if (postId) {
    const post = Trending.find((value) => value.id == postId)
    if (post) {
      return res.status(200).json(post)
    } else {
      return res.status(404).json({ error: "Post Not Found" })
    }
  }
  
  return res.status(404).json({ error: "Post Not Found" })
}