如何使用 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>
));

您可能也需要做同樣的事情來獲取評論。 說，評論是object中的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在渲染 function 中循環遍歷數組：

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>
        ));
        
    )

編輯：看起來我被打敗了！