从PostgreSQL数据库访问Next.js中的数据？
从PostgreSQL数据库访问Next.js中的数据？
提问于 2019-01-25 16:55:31
我已经在本地机器上创建了一个postgreSQL数据库。我有一个名为‘post’的表格。我使用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
}
]我尝试使用blogData ()将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 Blogmap()方法似乎适用于blogData2，但是现在我需要知道如何从数据库(blogData)获取返回的数据以适应这个结构(blogData2)。或者，有没有更好的方法来显示和访问我返回的数据(blogData)？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-27 21:11:09
正如注释中所讨论的，您在调用以下代码行中的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函数需要当前值(元素)和索引(可选)。但在上面的代码中，您使用了一个post对象来destructing blogData。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>
))}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54361852
复制相关文章
相似问题
腾讯云开发者
