Post 详细信息页面上未显示任何内容

Question

postdata.js

export const PostData = [
    {
        id: 1,
        slug: "see-the view",
        title: "See the view",
        content: <> <h1>Hey There </h1> </>
    }
]

[postslug].js

import { PostData } from "../../data/postdata";
export async function getStaticProps({ params }) {
  const posts = PostData.filter((p) => p.slug === params.postslug);
  console.log(posts);
  const mainpost = JSON.stringify(posts);
  return {
    props: {
      post: mainpost[0],
    },
  };
}
export async function getStaticPaths() {
  const paths = PostData.map((post) => ({
    params: { postslug: post.slug },
  }));

  return { paths, fallback: false };
}

const Post = ({ post }) => {
  return <>{post.content}</>;
};

export default Post;

Postdata.js 文件包含对象数组。我正在尝试使用 getStaticProps 和 getStaticPaths 获取博客文章的数据。但是没有任何显示。

Answer 1

我认为你的问题出在此处const mainpost = JSON.stringify(posts)

您尝试将一个对象字符串化，然后您调用 mainpost[0] 这已经是一个字符串

您也可以使用 find 而不是 filter 来获得单个 post，这可以帮助您避免意外的索引访问 [0]

貌似content是JSX，所以需要转成字符串再发给Post。然后你可以通过

解析 HTML 字符串

<div dangerouslySetInnerHTML={{ __html: post.content }} />

可能的解决方法是

import {PostData} from '../../data/postdata'
export async function getStaticProps({ params }) {
        const mainpost = PostData.find((p) => p.slug === params.postslug)
        mainpost.content = JSON.stringify(mainpost.content)
        return {
          props: {
            post : mainpost
          }
        }
      }
      export async function getStaticPaths() {
        const paths = PostData.map(post => ({
            params : {postslug : post.slug}  
        }))
    
        return {paths, fallback : false}
        
      }
    
      
    const Post = ({ post }) => {
       return <div dangerouslySetInnerHTML={{ __html: post.content }} />;
     };
    
    export default Post;

Answer 2

将您的代码更改为以下内容：

export async function getStaticProps({ params }) {
    const posts = PostData.filter((p) => p.slug === params.postslug)
    console.log(posts)
    const mainpost = posts[0];
    return {
      props: {
        post : mainpost
      }
    }
  }

此外，在文件 PostData 中更改此内容：

export const PostData = [
{
    id: 1,
    slug: "see-the view",
    title: "See the view",
    content: “Hey There“,
}

]

同时更改 Post 页面：

const Post = ({post}) => {

    return (
        <>

            <h1>{post.content}</h1>
        </>

    )
}

我建议您为 title 和 content 设置一个单独的值，然后用 h1 标签包裹标题，用 p 标签包裹内容。

Answer 3

有两种方法

重要提示：

If you want to render out the content of your post, you need to use dangerouslySetInnerHTML. And make sure that is HTML and not JSX. So make sure to replace className with class and other props

const Post = ({ post }) => {
  return <div dangerouslySetInnerHTML={{ __html: post.content }} />;
};

现在按照以下步骤进行

一个

只需将 post 对象中的 content 包裹在一个字符串中，那么您就不需要遵循第二种方式的麻烦了

export const PostData = [
    {
        id: 1,
        slug: "see-the view",
        title: "See the view",
        content: `<> <h1>Hey There </h1> </>`
    }
]

两个

所以现在您正在从 getStaticProps 返回一个字符串，因为您在其上使用了 JSON.stringify()。将其转换为字符串后，使用 JSON.parse().

将其转换回对象

这将是一个合适的 JS 对象，可以通过 getStaticProps

返回

import { PostData } from "../../data/postdata";

export async function getStaticProps({ params }) {
  const posts = PostData.filter((p) => p.slug === params.postslug);
  console.log(posts);
  // Converts it into string and then normal object
  const mainpost = JSON.parse(JSON.stringify(posts));
  return {
    props: {
      post: mainpost[0],
    },
  };
}
export async function getStaticPaths() {
  const paths = PostData.map((post) => ({
    params: { postslug: post.slug },
  }));

  return { paths, fallback: false };
}

const Post = ({ post }) => {
  return <div dangerouslySetInnerHTML={{ __html: post.content }} />;
};

export default Post;

Post 详细信息页面上未显示任何内容

Nothing is displaying on Post detail page

reactjs

next.js

有两种方法

重要提示：

一个

两个