由于某种原因，我的阵列中的内容没有打印到屏幕上

Question

我目前正在遵循有关Pern堆栈的教程，每当我尝试将阵列的内容打印到屏幕上，以 title 和 content ，都没有打印出来。

这是我的代码中依赖其中某个地方的代码：

import React, { Fragment, useState, useEffect } from "react";

const ListBlog = () => {
  const [blogs, setBlogs] = useState([]);

  const getBlogs = async () => {
    const res = await fetch('http://localhost:5000/blog');

    const blogArray = await res.json();

    setBlogs(blogArray)
  }

  useEffect(() => {
    getBlogs();
  }, [])

  console.log(blogs)
  return <Fragment>
    {" "}
    <table className="table mt-5">
    <thead>
      <tr>
        <th>Title</th>
        <th>Content</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
    {/* <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
</tr>*/}
     {
       blogs.map(blog => {
         <tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>
       })
     }
    </tbody>
  </table>
  </Fragment>
}

export default ListBlog;

我相信状态正在引起错误，因为它正在打印出以下内容：

(2) [{…}, {…}]0: {post_id: 1, title: 'hi', content: 'howdy'}1: {post_id: 11, title: 'eat', content: 'yogurt'}length: 2[[Prototype]]: Array(0)
[object Object],[object Object]

我只想打印出数组也打印出来，这可能导致我的内容不打印到我的本地主机页面。

这是我的页面在 title ， content ，编辑和删除的阵列打印中的内容时的样子，但没有显示任何内容...

Answer 1

在地图中更改具有正常伪造的卷曲括号

{
       blogs.map(blog => (
         <tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>
       ))
     }

Answer 2

发生这种情况是因为您忘记返回bolgs.map

 {
       blogs.map(blog => {
         return (<tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>)
       })
     }

或

 {
       blogs.map(blog => (
         <tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>
       ))
     }

Answer 3

您忘记了返回在地图中

{
   blogs.map(blog => {
     <tr>
       <td>
         {blog.title}
       </td>
       <td>{blog.content}</td>
       <td>Edit</td>
       <td>Delete</td>
     </tr>
   })
}

您可以写这本书

{
   blogs.map(blog => {
     return (
      <tr>
        <td>
          {blog.title}
        </td>
        <td>{blog.content}</td>
        <td>Edit</td>
        <td>Delete</td>
      </tr>
     )
   })
}

或

{
  blogs.map(blog => ( 
   <tr>
     <td>
       {blog.title}
     </td>
     <td>{blog.content}</td>
     <td>Edit</td>
     <td>Delete</td>
    </tr>
   ))
 }