如何使用 react 从后端数据库获取以显示在前端?

Question

我正在尝试从本地主机上的后端数据库(MongoDB)中获取以显示所有博客文章。

我假设我需要遍历前端的每篇博文。目前，仅显示"作者"和"评论"，但没有实际数据。

该语法会是什么样子？

这是我获取和显示的 React 页面的样子。

import React, { Component } from 'react'
class Blog extends Component {
constructor() {
super()

this.state = {
blogPost: [],
finishedLoading: true
}
}    

async componentDidMount() {    
const response = await fetch('http://localhost:8000/api/blogPosts/all')
const json = await response.json()
this.setState({ blogPost: json.blogPosts, finishedLoading: false })
}

reload = async () => {
const response = await fetch('http://localhost:8000/api/blogPosts/all')
const json = await response.json()
this.setState({ blogPost: json.blogPosts, finishedLoading: true })
}

render() {

if (this.state.blogPost.length === 0) {
return (
<div className="App">
<h1>No blogposts have been posted!</h1>
</div>
)
}

return (
<div class="blogPost">
<h2>{this.state.blogPost.title}</h2>
<p> Author: {this.state.blogPost.author}</p>
<p>{this.state.blogPost.content}</p>
<p>Comments:</p>
<ul>

</ul>
</div>
)
}
}
export default Blog

Answer 1

你应该遍历内容，但你只做一次，在数组上也是如此：

return (
<div class="blogPost">
<h2>{this.state.blogPost.title}</h2>
<p> Author: {this.state.blogPost.author}</p>
<p>{this.state.blogPost.content}</p>
<p>Comments:</p>
<ul></ul>
</div>
);

上面的代码是错误的。你需要做的是迭代this.state.blogPost的内容，这是一个blog对象的数组：

return this.state.blogPost.map((blog, key) => (
<div class="blogPost" key={key}>
<h2>{blog.title}</h2>
<p> Author: {blog.author}</p>
<p>{blog.content}</p>
<p>Comments:</p>
<ul></ul>
</div>
));

您可能还需要执行相同的操作来获取评论。比如说，注释是对象中的comments数组，然后这样做：

return this.state.blogPost.map((blog, key) => (
<div class="blogPost" key={key}>
<h2>{blog.title}</h2>
<p> Author: {blog.author}</p>
<p>{blog.content}</p>
<p>Comments:</p>
<ul>
{blog.comments.length > 0 ? (
blog.comments.map((c, k) => <li key={key}>{c}</li>)
) : (
<li>No comments.</li>
)}
</ul>
</div>
));

---

完整代码在这里：

import React, { Component } from "react";
class Blog extends Component {
constructor() {
super();
this.state = {
blogPost: [],
finishedLoading: true
};
}
async componentDidMount() {
const response = await fetch("http://localhost:8000/api/blogPosts/all");
const json = await response.json();
this.setState({ blogPost: json.blogPosts, finishedLoading: false });
}
reload = async () => {
const response = await fetch("http://localhost:8000/api/blogPosts/all");
const json = await response.json();
this.setState({ blogPost: json.blogPosts, finishedLoading: true });
};
render() {
if (this.state.blogPost.length === 0) {
return (
<div className="App">
<h1>No blogposts have been posted!</h1>
</div>
);
}
return this.state.blogPost.map((blog, key) => (
<div class="blogPost" key={key}>
<h2>{blog.title}</h2>
<p> Author: {blog.author}</p>
<p>{blog.content}</p>
<p>Comments:</p>
<ul>
{blog.comments.length > 0 ? (
blog.comments.map((c, k) => <li key={key}>{c}</li>)
) : (
<li>No comments.</li>
)}
</ul>
</div>
));
}
}
export default Blog;

Answer 2

您正在将this.state.blogPost设置为从数据库中接收的blogPosts数组。因此，this.state.blogPost.author将是未定义的，因为数组没有.author属性。数组中的项将具有该属性，访问方式如下：this.state.blogPost[0].author获取第一篇文章的作者。

要显示数组中每个项目的div，您需要使用.map遍历渲染函数中的数组：

return (
this.state.blogPost.map((post, index) => (
<div class="blogPost" key={index}>
<h2>{post.title}</h2>
<p> Author: {post.author}</p>
<p>{post.content}</p>
<p>Comments:</p>

<ul>

</ul>
</div>
));

)

编辑：看起来我被打败了！