React中如何访问并渲染复杂嵌套JSON数据实现类Netflix行列布局

问题原因 #

你当前的代码结构只定义了一组「标题容器+轮播容器」，所有分类的标题都被塞到同一个<Title>节点里，轮播遍历的是外层的分类数据而非每个分类下的作品列表，才会出现布局不符合预期的问题。

修改方案 #

需要把循环逻辑外移，遍历每一个分类（图书/影视）时，单独渲染对应分类的标题和轮播组件，轮播内部遍历当前分类下的row数组获取作品数据，同时补全所有循环的唯一key属性。
修改后的完整代码如下：

import React, { useState, useEffect } from 'react';
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) => response.json())
      .then((myJson) => {
        setData(myJson);
      });
  };
  useEffect(() => {
    getData();
  }, []);

  const settings = {
    dots: false,
    infinite: false,
    speed: 1000,
    slidesToShow: 10, // 一行展示10个内容，可按需调整
    slidesToScroll: 10, // 一次滚动10个，可按需调整
  };

  return (
    <>
      {/* 遍历每个分类，每个分类单独渲染一行（标题+轮播） */}
      {data.map((category) => (
        <RowSlider key={category.id}>
          <Title>
            <h1>{category.rowTitle}</h1>
          </Title>
          <SliderContainer>
            <Caroussel {...settings}>
              {/* 遍历当前分类下的作品列表 */}
              {category.row.map((item) => (
                <div key={item.id}>
                  <div className="slick-slide">
                    <img
                      className="slick-slide-image"
                      alt={item.title}
                      src={item.url}
                    />
                    <h2 className="slick-slide-title">{item.title}</h2>
                  </div>
                  <Link to="/stations">
                    <div className="slick-slide-filter"> </div>
                  </Link>
                </div>
              ))}
            </Caroussel>
          </SliderContainer>
        </RowSlider>
      ))}
    </>
  );
};

export default Home;

补充说明 #

如果一行展示10个内容出现挤压适配问题，可以给slick-slide节点设置固定宽度，或者调整slidesToShow参数适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Learning-X