React轮播组件仅渲染首屏，切换后无法显示后续幻灯片问题

我正在开发一个包含2张幻灯片的轮播组件，每张幻灯片包含4张卡片。当前遇到的问题是：React仅渲染第一张幻灯片，点击切换按钮后，后续幻灯片无法正常渲染。使用了useEffect和useState钩子，相关代码如下：

import React from 'react';
import {Slider,Container,CategoriesContainer,CategoryButton} from "./StyledComponents"
import Slide from "./Components/Slide"
import { TopSalesData } from '../../../../../Database/DummyDatabase';


const Events = [TopSalesData[0], TopSalesData[1]];
const delay = 7500;
const Categories = ["Carti", "Carti Straine"]

const TopSalesCarousel = () => {
    const [index, setIndex] = React.useState(0);
    const timeoutRef = React.useRef(null);
    
    function resetTimeout() {
        if (timeoutRef.current) {
          clearTimeout(timeoutRef.current);
        }
    }

    React.useEffect(() => {
        resetTimeout();
        timeoutRef.current = setTimeout(
        () =>
        setIndex((prevIndex) =>
          prevIndex === Events.length - 1 ? 0 : prevIndex + 1
        ),
      delay
        );

        return () => {resetTimeout();};
    }, [index]);

    return (
        <Container> 
            <Slider style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}>
                {
                    Events.map((_,index)=><Slide items = {Events[index]}></Slide>)
                }
            </Slider>

            <CategoriesContainer>
                {Events.map((_, idx) => (
                    <CategoryButton key={idx} onClick={() => {setIndex(idx);}}>{Categories[idx]}</CategoryButton>
                ))}
            </CategoriesContainer>    
    
    </Container>
        
    );

}       
export default TopSalesCarousel

Slide组件代码：

import { RootContainer } from "./StyledComponents";
import TopSaleCard from "../TopSaleCard";

const Slide = (props) => {
    return(
        <RootContainer>
             {  props.items.map((item, index)=>
                    <TopSaleCard 
                        key={index} 
                        title={item.name} 
                        img = {item.img} 
                        position = {item.position}>
                    </TopSaleCard>
                    )
                }    
        </RootContainer>   
    )       
}
export default Slide

Slider样式代码：

export const Slider = styled.div`
    white-space: nowrap;
    background:transparent;
    height:26rem;
    margin-top:1rem;
    transition: ease 3000ms;
    `

问题分析 #

1. Slide容器样式缺失：Slider设置了white-space: nowrap实现横向排列，但Slide的RootContainer没有配置宽度和显示方式，导致所有幻灯片挤在同一可视区域，仅第一张能正常展示。
2. 变量名冲突：轮播渲染的map中使用index作为参数名，与组件状态变量index重名，虽不报错但易引发逻辑混淆。
3. 卡片布局未明确：Slide内的4张卡片缺少布局规则，可能导致卡片无法正常排列。

修复步骤 #

1. 补充Slide容器样式

修改Slide组件的StyledComponents，确保每个幻灯片占满Slider宽度，且卡片能正常排列：

export const RootContainer = styled.div`
  width: 100%;
  display: inline-block;
  white-space: normal; /* 取消继承的nowrap，让卡片正常布局 */
  height: 100%;
  /* 配置4张卡片的布局，示例用grid */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0 1rem;
`;

2. 修正变量名冲突

将轮播渲染部分的map参数名改为idx，避免与状态变量混淆：

<Slider style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}>
  {Events.map((event, idx) => (
    <Slide key={idx} items={event} />
  ))}
</Slider>

3. 验证数据结构

确保TopSalesData[0]和TopSalesData[1]都是包含4个元素的数组，否则Slide组件无法渲染出预期的4张卡片。

修改后的完整轮播组件代码 #

import React from 'react';
import {Slider,Container,CategoriesContainer,CategoryButton} from "./StyledComponents"
import Slide from "./Components/Slide"
import { TopSalesData } from '../../../../../Database/DummyDatabase';

const Events = [TopSalesData[0], TopSalesData[1]];
const delay = 7500;
const Categories = ["Carti", "Carti Straine"]

const TopSalesCarousel = () => {
    const [index, setIndex] = React.useState(0);
    const timeoutRef = React.useRef(null);
    
    function resetTimeout() {
        if (timeoutRef.current) {
          clearTimeout(timeoutRef.current);
        }
    }

    React.useEffect(() => {
        resetTimeout();
        timeoutRef.current = setTimeout(
          () => setIndex(prevIndex => prevIndex === Events.length - 1 ? 0 : prevIndex + 1),
          delay
        );

        return () => resetTimeout();
    }, [index]);

    return (
        <Container> 
            <Slider style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}>
                {Events.map((event, idx) => (
                    <Slide key={idx} items={event} />
                ))}
            </Slider>

            <CategoriesContainer>
                {Events.map((_, idx) => (
                    <CategoryButton key={idx} onClick={() => setIndex(idx)}>
                        {Categories[idx]}
                    </CategoryButton>
                ))}
            </CategoriesContainer>    
        </Container>
    );
}       
export default TopSalesCarousel

内容的提问来源于stack exchange，提问作者user12312852