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

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>john@example.com</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]

我只想打印数组，但出于某种原因 [Object object] 也正在打印，这可能导致我的内容无法打印到我的本地主机页面。

这是我尝试将数组中的内容打印在 title、content、编辑、和删除但没有显示任何内容...

Answer 1

发生这种情况是因为您在 bolgs.map

中忘记 return

 {
       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 2

在地图中使用正常的 pharantesis 更改大括号

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

Answer 3

您忘记在地图return

{
   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>
   ))
 }

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

For some reason my content within an array is not printing out to the screen

javascript

reactjs

react-hooks

fetch