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

Posted 2023-02-22

【中文标题】如何在 REACT 中访问更复杂的嵌套数据 JSON

【英文标题】：How to access more complex nested data JSON in REACT

【发布时间】：2021-11-27 15:49:01

【问题描述】：

我正在尝试从我的组件中渲染一排 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;

【问题讨论】：

您的数据是一个对象数组，其中包含一个名为“row”的属性，该属性也是一个数组。您没有遍历 row 属性。

@Andy，是的，但我只是不知道该怎么做。现在已经几个小时了:(

再制作一个.map

@Andy 给了我同样的错误，警告：列表中的每个孩子都应该有一个唯一的“关键”道具。另外，对于 Title 的第一个 console.log，应该先渲染两个标题还是一个标题，然后在渲染其他标题电影之前渲染书籍？

@War10ck 写了一个修复它的答案！但由于某些原因，他的回答消失了。我已经在这里待了好几个小时了，实在是太感谢你了！非常感谢你们所有的时间:))

【参考方案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>