从 PostgreSQL 数据库访问 Next.js 中的数据？

Question

我已经在我的本地机器上创建了一个 postgreSQL 数据库。我在其中有一个 table，名为 'posts'。我使用 fetch() 从数据库中获取数据，并使用 json():

使其在 Javascript 中可用

Blog.getInitialProps = async function(props) {
    // API call to database
    console.log('getting props');
    const res = await fetch('http://localhost:2000/blog-posts');
    const blogData = await res.json();

    console.log('blogData: ', blogData);

return {
    blogData: blogData
};
};

当我尝试使用数据 (blogData) 时，问题来了。 fetch() 和 .json() returns 格式如下：

// blogData
[
{
    slug_name: 'post-1',
    post_name: 'Post 1',
    post_content: 'Hello world. This is Post 1.',
    author_name: 'Jedakiah Moore',
    author_image: 'Jedakiah_image',
    post_date: '2019-01-24T06:00:00.000Z',
    amount_of_comments: 0 
},
{
    slug_name: 'post-2',
    post_name: 'Post 2',
    post_content: 'Hello world. This is Post 2.',
    author_name: 'Jedakiah Moore',
    author_image: 'Jedakiah_image',
    post_date: '2019-01-24T06:00:00.000Z',
    amount_of_comments: 0 
}
]

我尝试使用 map() 将 blogData 数组中的每个对象呈现为它们自己的博客 post 预览。这将允许我使用点符号来访问每个对象中的每个键（例如：author_name、post_date 等）：

const Blog = (props) => (
 <div className="blog-post-feed">
     <ul className="blog-post-list">
         {props.blogData.map(({post }) => (
             <li key={post.slug_name}>
                 <Link href={`/posts?id=${post.slug_name}`}>
                     <a className="blog-post-preview" title={ post.post_name }>
                         {post.post_name}
                     </a>
                 </Link>
             </li>
         ))}
     </ul>
 </div>
)
export default Blog

这会出错，因为 blogData 数组中的 none 个对象包含名为 'post' 的键。下面的示例数组称为 blogData2，显示了 map() 期望我返回的数据 (blogData) 的外观。我将 blogData2 创建为硬编码数组，以测试 map() 是否适用于这种格式：

Blog.getInitialProps = async function(props) {
    const blogData2 = [
        { 
            post: {
                post_slug: 'post-1',
                post_name: 'Post 1' 
            },
        },
        {
            post: {
                post_slug: 'post-2',
                post_name: 'Post 2' 

            }  
        }
    ];

    return {
        blogData2: blogData2
    };
};

const Blog = (props) => (
     <div className="blog-post-feed">
         <ul className="blog-post-list">
             { props.blogData2.map(({ post }) => (
                 <li key={ post.slug_name }>
                     <Link href={ `/posts?id=${ post.slug_name }` }>
                         <a className="blog-post-preview" title={post.post_name }>
                             { post.post_name }
                         </a>
                     </Link>
                 </li>
                    )) }
         </ul>
     </div>
    )
    export default Blog

map() 方法似乎适用于 blogData2，但现在我需要知道如何从数据库 (blogData) 获取返回的数据以适合此结构 (blogData2)。或者是否有更好的方式来显示和访问我返回的数据 (blogData)？

Answer 1

如评论中所述，您在以下代码行中调用 map 函数时遇到问题。

{props.blogData.map(({post }) => (
    <li key={post.slug_name}>
      <Link href={`/posts?id=${post.slug_name}`}>
          <a className="blog-post-preview" title={ post.post_name }>
             {post.post_name}
          </a>
       </Link>
     </li>
  ))}

map function expects current value (element) and index (optional). But in the above code you are destructing blogData 与 post 对象。 blogData 中没有 post 对象。但是在 blogData2 对象中，你故意创建了 post 对象。所以它正在工作。要解决此问题，只需删除破坏对象即可。

{props.blogData.map(post => (
    <li key={post.slug_name}>
      <Link href={`/posts?id=${post.slug_name}`}>
          <a className="blog-post-preview" title={ post.post_name }>
             {post.post_name}
          </a>
       </Link>
     </li>
  ))}

从 PostgreSQL 数据库访问 Next.js 中的数据？

Access Data In Next.js From PostgreSQL Database?

javascript

postgresql

reactjs

next.js