как загрузить вложенные данные из файла json в react

#json #reactjs #typescript

#json #reactjs #typescript

Вопрос:

у меня есть простой файл 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}, но не дочерняя часть?

Ответ №1:

вы не можете получить доступ, postDetail.child.base вероятно, потому postDetail.child , что это массив. Попробуйте получить к нему доступ следующим образом postDetail.child[0].base .

Надеюсь, это поможет.. Оставьте комментарий, если ваша проблема отличается. Я отредактирую свой ответ

Это должен был быть комментарий, но у меня недостаточно репутации.