Javascript 旋转木马不渲染每张幻灯片的两个元素

我正在用这个
我想在旋转木马的每张幻灯片中显示两张卡片。 我的代码-

Catalog.js

import React from 'react';
import { Grid, Typography, Divider, FormControl, InputLabel, MenuItem, Select, Button } from '@material-ui/core';
import CarouselComp from '../../components/carousel/CarouselComp'
import RectangularCard1 from '../../components/cards/ReactangularCard1';
import { catalog_data } from '../../static_data'
    
const Catalog = (props) => {
    
    let popularBundles = JSON.parse(JSON.stringify(catalog_data.popularBundles))    

    return (
        <Grid container>
            <CarouselWrapperRect data={popularBundles} />
        </Grid>
    )
}


const CarouselWrapperRect = ({ data }) => {
    let newArray = [];
    while (data.length > 0)
        newArray.push(data.splice(0, 2));

    return (
        <Grid item container >
            <Grid item container>
                <CarouselComp>
                    {newArray.map((each, i) =>
                        <CarouselSlideRect newData={each} key={i} />
                    )}
                </CarouselComp>
            </Grid>
        </Grid >
    )
}



const CarouselSlideRect = ({ newData }) => {
    return (
        <Grid container direction='row' xs={12} spacing={2}>
            {newData.map((each, i) =>
                <Grid item xs={6} >
                    <RectangularCard1 bundleBy={each.bundleTitle} />
                </Grid>
            )}
        </Grid>
    )
}

export default Catalog;

import React, { useState } from 'react'
import Carousel from 'react-material-ui-carousel'    
import { Button } from '@material-ui/core'
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';

const CarouselComp = ({ children }) => {

    return (
        <div>
            <Carousel autoPlay={false} navButtonsAlwaysVisible={true}
              cycleNavigation={false}
              NavButton={({ onClick, className, style, next, prev }) => {
                    return (
                        <Button onClick={onClick} className={classes.navButton}>
                            {next && <ChevronRightIcon />}
                            {prev && <ChevronLeftIcon />}
                        </Button>
                    )
                }}
            >
                {
                    children
                }
            </Carousel>
        </div>
    )
}

export default CarouselComp;

import React from 'react'
import {
     Card
} from '@material-ui/core'

const RectangularCard1 = (props) => {

    let { bundleBy } = props

    return (
        <Card variant='outlined'>
            <span>{bundleBy}</span>
        </Card>
    )
}

export default RectangularCard1;

export const catalog_data = {

    popularBundles: [{
        bundleTitle: 'by Octopi One',
    },
    {
        bundleTitle: 'by Developia'
    },
    {
        bundleTitle: 'by Custom Company Name'
    },
    ],
}

我没有看到任何旋转木马渲染，为什么会发生这种情况？我想在一张幻灯片中显示atmost两张卡，如下图-

---

这是我的沙盒链接-

您正在直接修改

数据。不要在react中改变道具。相反，在
newData
中复制
data
prop的内容，并按如下方式进行操作：-

  let newData = [...data];
  while (newData.length > 0) newArray.push(newData.splice(0, 2));

这是叉子