Question

我已经在本地计算机上创建了一个postgreSQL数据库。我有一张桌子叫做“职位”。我使用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（）返回的格式如下：

// 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数组中的每个对象呈现为其自己的博客文章预览。这将允许我使用点表示法来访问每个对象中的每个键（例如：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数组中的任何对象都不包含一个名为“ 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函数需要当前值（元素）和索引（可选）。但是在上面的代码中，您是destructing blogData和一个post对象。 post中没有blogData对象。但是，您在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中的数据？

1 个答案: