我无法从 Next Js API 中的对象获取 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 博客上工作，我必须从 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" })
}