如何在反应中从json文件加载嵌套数据答案

【问题标题】：how to load nested data from json file in react如何在反应中从json文件加载嵌套数据
【发布时间】：2020-08-22 09:34:38
【问题描述】：

我有这样的简单 json 文件：

[{
        "id": "1",
        "title": "How to become a best sale marketer in a month!",
        "Summary": "Lorm voluptatem reecto, quos amet hic aliquid!",
        "dateAdd": "May 9, 2021",
        "body": "Lorem ipsum dolor sit amet",
        "child": [{
            "base": "Lorem ipsum dolor sit ametLorem ipsum dolor sit amet"
        }]
    },
    {
        "id": "2",
        "title": "SEO trend to look for the best in 2020",
        "Summary": "Lorem ipsum",
        "dateAdd": "May 9, 2020",
        "body": "Lorem ipsum dolor sit amet",
        "child": [{
            "base": "Lorem ipsum dolor sit ametLorem ipsum dolor sit amet"
        }]

    }]

这是我使用 json 数据的博客组件：

import React from "react";
import { Link } from "react-router-dom";
import data from "../../layout/data.json";

const _Blog = (props: any) => {
  return (
    <>
      <div className="col-md-8">
        {data.map((postDetail, index) => {
          return (
            <article className="blog-post-item">
              <div className="post-thumb">
                <img
                  src="assets/images/blog/news-1.jpg"
                  alt=""
                  className="img-fluid"
                />
              </div>
              <div className="post-item mt-4">
                <div className="post-meta">
                  <span className="post-date">
                    <i className="fa fa-calendar-alt mr-2"></i>{postDetail.dateAdd}
                  </span>
                </div>
                <h2 className="post-title">
                  <a href="blog-single.html">
                    {postDetail.title}
                  </a>
                </h2>
                <div className="post-content">
                  <p>
                    {postDetail.body}
                  </p>
                  <h5 key={index}>
                    <Link to={`/blog-detail/${index + 1}`}>More</Link>
                  </h5>
                </div>
              </div>
            </article>
          );
        })}
      </div>
    </>
  );
};

export const Blog = _Blog;

它工作正常，但我想使用来自子对象的数据。所以我想我应该像这样使用它： {postDetail.child.base} 但它不会加载它。我在这一点上完全迷失了。 {postDetail.title} 或 {postDetail.body} 如何工作而不是子部分？

【问题讨论】：

标签： json reactjs typescript

【解决方案1】：

您无法访问 postDetail.child.base 可能是因为 postDetail.child 是一个数组。尝试像postDetail.child[0].base 一样访问它。

希望对您有所帮助。如果您的问题有所不同，请发表评论。我会编辑我的回复

应该是评论，但我没有足够的声誉。

【讨论】：