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

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

我正在尝试建立一个反应网站博客。我有一个包含所有帖子的JSON文件。我想将数据传递到我的blogSelction组件。目标是拥有不同的卡，并且每张卡中都包含来自JSON的数据。不同的div中会有不同的博客文章。我想要这样，当我将其添加到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;

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

由于编写量大，我已将所有数据从JSON中取出。

--与代码无关- 当我在这里发表文章时，我还想学习如何在编程领域更加清楚地表达自己的观点，以便我能更好地发表关于堆栈溢出的文章，并与开发人员交谈，如果您有任何提示或建议，将不胜感激。