Javascript 如何将数据从json文件自动传递到组件中？

我正试图建立一个网站博客。我有一个JSON文件，里面有我所有的帖子。我想将数据传递到我的BlogSelection组件。目标是拥有不同的卡，并且在每个卡中都有来自JSON的数据。在不同的分区中会有不同的博客帖子。我希望这样，当我添加到JSON文件时，它会自动生成一个卡片帖子，您可以单击

我只是想知道为它编写代码的最佳方式是什么，我是一个完全的新手，所以它可能非常简单，我只是在这方面没有受过教育

我是如何尝试做到这一点的是useState和useEffect，让计算机知道目录；使用它使代码知道在哪里查找。在它处于状态之后，我使用map调用并尝试获取帖子，但它似乎不起作用

import React, { useEffect, useState } from "react";
import "./style.css";
import { NavLink } from "react-router-dom";
import Card from "../../Card";
import blogPost from "../../../data/blog.json";

const BlogCards = (props) => {
  const [post, setpost] = useState([]);
  const [blogs, setblogs] = useState([
    {
      id: "",
      blogCategory: "",
      blogTitle: "",
      postedOn: "",
      author: "",
      blogImage: "",
      blogText: "",
      blogText2: "",
      blogText3: "",
      blogText4: "",
    },
  ]);

  useEffect(() => {
    const blogs = blogPost.data;
    setblogs(blogs);
  }, [blogs]);

  if (blogs.blogImage == "") return null;

  return (
    <div className="item-1">
      <article className="IndividualArticles">
        <Card>
          {blogs.map((blog) => {
            return (
              <NavLink key={blog.id} className="Link" to={`/post/${post.id}`}>
                <div>
                  <h1>{blog.blogTitle}</h1>
                  <p>{blog.blogText}</p>
                  <span>Posted on {blog.postedOn}</span>
                </div>
              </NavLink>
            );
          })}
        </Card>
      </article>
    </div>
  );
};

export default BlogCards;

由于编写量太大，我已经从JSON中取出了所有数据

---与代码无关---

---

当我在这里发帖时，我还想学习如何在编程领域更清晰地表达自己的观点，这样我就可以更好地表达我在stack overflow上的发帖，如果您有任何提示或建议，我将不胜感激。

请发布一些您尝试过的代码，并尝试将问题缩小到哪些不适用你我想这会帮助你回答你的问题-你能分享一个json文件的示例内容吗？你的json似乎有问题。你能分享你的json文件吗？我已经发布了带有空字符串的json，如果你需要查看完整的json文件，请告诉我。但是，它没有出现任何错误。请发布一些您尝试过的代码，并尝试将问题缩小到对您不起作用的部分。我想这将有助于您回答您的问题-您可以分享json文件的示例内容吗？您的json似乎有问题。你能分享你的json文件吗？我已经发布了带有空字符串的json，如果你需要查看完整的json文件，请告诉我。但是它没有出现任何错误。

{
    "data" : [
        {
            "id": 1,
            "blogCategory": "",
            "blogTitle" : ".",
            "postedOn" : "06/08/2020",
            "author": "Robert Lawson ",
            "blogImage" : "",
            "blogText" : "",
            "blogText2" : "",
            "blogText3" : "",
            "blogText4" : ""
        },
 {
            "id": 2,
            "blogCategory": "",
            "blogTitle" : ".",
            "postedOn" : "06/08/2020",
            "author": "Robert Lawson ",
            "blogImage" : "",
            "blogText" : "",
            "blogText2" : "",
            "blogText3" : "",
            "blogText4" : ""
        },
 {
            "id": 3,
            "blogCategory": "",
            "blogTitle" : ".",
            "postedOn" : "06/08/2020",
            "author": "Robert Lawson ",
            "blogImage" : "",
            "blogText" : "",
            "blogText2" : "",
            "blogText3" : "",
            "blogText4" : ""
        },
 {
            "id": 4,
            "blogCategory": "",
            "blogTitle" : ".",
            "postedOn" : "06/08/2020",
            "author": "Robert Lawson ",
            "blogImage" : "",
            "blogText" : "",
            "blogText2" : "",
            "blogText3" : "",
            "blogText4" : ""
        },
 {
            "id": 5,
            "blogCategory": "",
            "blogTitle" : ".",
            "postedOn" : "06/08/2020",
            "author": "Robert Lawson ",
            "blogImage" : "",
            "blogText" : "",
            "blogText2" : "",
            "blogText3" : "",
            "blogText4" : ""
        },
 {
            "id": 6,
            "blogCategory": "",
            "blogTitle" : ".",
            "postedOn" : "06/08/2020",
            "author": "Robert Lawson ",
            "blogImage" : "",
            "blogText" : "",
            "blogText2" : "",
            "blogText3" : "",
            "blogText4" : ""
        }
    ]
}