如何在 REACT 中访问更复杂的嵌套数据 JSON

Question

我正在尝试从我的组件中渲染一排 10 本书和一排 10 部电影，这看起来就像 netflix 中的行，以便为您提供一个想法。我已经缩短了下面的json。我能够获取和访问我的数据并将其保存在组件的 useState 中。虽然我无法渲染。缺乏经验。我已将结果粘贴到两个 console.log 波纹管反应组件中。欢迎帮忙！！！

JSON 文件

[
  {
    "id": 1,
    "rowTitle": "Books",
    "row": [
      {
        "id": 1,
        "title": "Book1",
        "desc": "Book1 description",
        "url": "images/books/Book1.jpeg"
      },
      {
        "id": 2,
        "title": "Book2",
        "desc": "Book2 description",
        "url": "images/books/Book2.jpeg"
      },
  
    ]
  },
  {
    "id": 2,
    "rowTitle": "Movies",
    "row": [
      {
        "id": 1,
        "title": "movie1",
        "desc": "movie1 description",
        "url": "images/movies/movie1.jpeg"
      },
      {
        "id": 2,
        "title": "movie2",
        "desc": "movie2 description",
        "url": "images/movies/movie2.jpeg"
      },

    ]
  }
]

反应组件

import { Link } from 'react-router-dom';
import { Caroussel, RowSlider, SliderContainer, Title } from './Home.styled';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const Home = () => {
  const [data, setData] = useState([]);

  const getData = () => {
    fetch('data/projects.json', {
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    })
      .then((response) => {
        console.log(response);
        return response.json();
      })
      .then((myJson) => {
        console.log(myJson);
        setData(myJson);
      });
  };
  useEffect(() => {
    getData();
  }, []);

  const settings = {
    dots: false,
    infinite: false,
    speed: 1000,
    slidesToShow: 2,
    slidesToScroll: 2,
    // lazyLoad: 'progressive',
  };

  return (
    <>
      <RowSlider>
        <Title>
          {data.map((obj) => {
            console.log(obj);
            // RESULT -> Object { id: 1, rowTitle: "Books", row: (10) […] }
            return <h1>{obj.rowTitle}</h1>; 
// -> RESULT but this render at the same time both titles (BOOKS and MOVIES), and I need to render BOOKS title first then its books row before rendering next row, MOVIES title and its movies..
          })}
        </Title>
        <SliderContainer>
          <Caroussel {...settings}>
            {data &&
              data.map((slide) => {
                console.log(slide);
                // RESULT -> Warning: Each child in a list should have a unique "key" prop. ** BUT not event sure event if they was an it would still be working
                return (
                  <div key={slide.id}>
                    <div className="slick-slide">
                      <img
                        className="slick-slide-image"
                        alt={slide.title}
                        src={slide.url}
                      />

                      <h2 className="slick-slide-title">{slide.title}</h2>
                    </div>
                    <Link to="/stations">
                      <div className="slick-slide-filter"> </div>
                    </Link>
                  </div>
                );
              })}
          </Caroussel>
        </SliderContainer>
      </RowSlider>
    </>
  );
};
//  {/* <label className="slick-slide-label">{slide.label}</label> */}
export default Home;

Answer 1

您的数据是一个对象数组，因此您 a) 需要遍历 (map) 它们，然后 b) map 遍历这些对象内的行数组以构建 HTML。

function Example({ data }) {

  function getJSX(data) {

    // `map` over the array and for each object
    // return the rowTitle, and also `map` over
    // each object in `row` and return some markup
    return data.map(obj => {
      return (
        <div key={obj.id}>
          <h4>{obj.rowTitle}</h4>
          {obj.row.map(row => {
            return <div>{row.title}: {row.desc}</div>;
          })}
        </div>
      );
    });
  }

  return (
    <div>
      {getJSX(data)}
    </div>
  );

};

const data=[{id:1,rowTitle:"Books",row:[{id:1,title:"Book1",desc:"Book1 description",url:"images/books/Book1.jpeg"},{id:2,title:"Book2",desc:"Book2 description",url:"images/books/Book2.jpeg"}]},{id:2,rowTitle:"Movies",row:[{id:1,title:"movie1",desc:"movie1 description",url:"images/movies/movie1.jpeg"},{id:2,title:"movie2",desc:"movie2 description",url:"images/movies/movie2.jpeg"}]}];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>