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 獲取博客文章的資料。但是什么都沒有顯示。

uj5u.com熱心網友回復：

有2種方式

??重要提示：

如果你想渲染content你的帖子，你需要使用dangerouslySetInnerHTML. 并確保它是HTML而不是 JSX。所以一定要替換classNamewithclass和其他道具

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;

uj5u.com熱心網友回復：

將您的代碼更改為以下內容：

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。

uj5u.com熱心網友回復：

我認為你的問題來自這里const mainpost = JSON.stringify(posts)

您嘗試對一個物件進行字串化，然后呼叫mainpost[0]它已經是一個字串

您還可以使用find而不是filter獲取可以幫助您避免意外索引訪問的單個帖子[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;

標籤：反应 下一个.js

上一篇：反應版本的window.location.replace()？

下一篇：如何做一個寬度相同但字體大小不同的2行文本元素