当我使用 useEffect 和 useState 时，我的 jsx 没有填充

Question

我填充代码的文件代码

import React, { useEffect, useState } from "react";
import blogStyle from "../styles/Blog.module.css";
import Link from "next/link";

function blog() {
  const [blogs, setBlogs] = useState([]);
  useEffect(() => {
    fetch("http://localhost:3000/api/allBlogs")
      .then((parsingData) => {
        return parsingData.json();
      })
      .then((data) => {
        setBlogs(data);
        console.log(data);
      });
  }, []);

  return (
    <>
      <div className={blogStyle.blog}>
        {blogs.map((blogItem) => {
          <div className={blogStyle.blogItemTemplate} key={blogItem.title}>
            <Link href={`/blogPost/how-to-learn-js`}>
              <h2 className={blogStyle.blogItemHeading}>{blogItem.title}</h2>
            </Link>
            <p className={blogStyle.blogItemPara}>{blogItem.content}</p>
            <div className={blogStyle.blogItemPara}>{blogItem.writer}</div>
          </div>;
        })}
      </div>
    </>
  );
}

我在我的本地主机上得到了什么 image here

控制台一切正常，没有错误，我得到了获取的数据。我使用 useState 将获取的数据存储在博客中，这是成功的，但是当我使用 jsx 中的博客填充数据时，没有任何显示。使用地图功能，我在控制台登录时获得了标题和描述，但未显示在本地主机中

Answer 1

我很确定你有一些额外的牙套，试试这个：

{blogs.map((blogItem) => ( // <-- see here
    <div className={blogStyle.blogItemTemplate} key={blogItem.title}>
        <Link href={`/blogPost/how-to-learn-js`}>
            <h2 className={blogStyle.blogItemHeading}>{blogItem.title}</h2>
        </Link>
        <p className={blogStyle.blogItemPara} >{blogItem.content}</p>
        <div className={blogStyle.blogItemPara}>{blogItem.writer}</div>
    </div>
))} // <-- and here

Answer 2

在 return 语句中编写 jsx 代码，例如 blogs.map((blogItem) => {return (...your jsx code)})，否则试试这个 blogs.map((blogItem) => (...your jsx code.)).

当我使用 useEffect 和 useState 时，我的 jsx 没有填充

My jsx is not populating when I used useEffect and useState

javascript

reactjs

next.js