Javascript 如何映射旋转木马的子项数组？

我试图将一个旋转木马组件作为组件的子组件围绕一个映射对象数组进行包装。目前，我只能让映射创建映射对象的1个子对象

旋转木马需要如下所示：

<Carousel>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</Carousel>

const array_chunks = (array, chunk_size) => Array(Math.ceil(array.length / chunk_size)) .fill() .map((_, index) => index * chunk_size) .map((begin) => array.slice(begin, begin + chunk_size)); 
const chunks = array_chunks(SymbolData, 3);

1.
2.
3.

但在这一个上不能正常工作

<Carousel>
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</Carousel>

1.
2.
3.

请参阅原始可复制代码，该代码将我的旋转木马包裹在映射项的1个子项周围： 请注意，您将看到旋转木马工作正常，但许多旋转木马属性根本不工作，因为它围绕一个子对象，例如动画和指示器

我试过这样做：

          <Carousel
            autoPlay={false}
            onClick={handleChangePage}
            next={loopNext}
            prev={loopPrev}
            NextIcon={<ArrowForwardIosRoundedIcon fontSize='large'/>}
            PrevIcon={<ArrowBackIosRoundedIcon fontSize='large'/>}
            navButtonsProps={{      
              style: {
                  backgroundColor: 'transparent',
                  color:"#447CF0"
              }
            }} 
            indicators={true}
            swipe={true}
            animation="slide"
          >
              {data[0]?.slice((page - 1) * itemsPerPage, page * itemsPerPage)
                .map((data, index) =>
                {
                  return (  
                    <Container key={index} maxWidth="lg" component="main">
                      <Grid container  key={index}>
                        <Grid item key={index} xs={4} md={4}>
                            <Card>
                            <CardHeader
                            title={<Chip label={data.symbol} />} 
                            subheader={data.adj_close}        
                            />      
                            <CardContent >
                              <MiniGraphs
                                historicalPrice={historicalPrice.filter(i => i.symbol === data.symbol)}
                                dateRange={date}
                              />            
                            </CardContent>
                            </Card>
                        </Grid>
                      </Grid>
                      </Container>
                    );
                })}
          </Carousel>

更新答案：
旋转木马要求在开始时渲染所有字段

要创建每张幻灯片上有3个项目的多张幻灯片，应将数据数组“拆分”为多个部分，每个部分包含3个项目

对于这些项目，可以渲染一个包含3个子项的
，如下所示：

<Carousel>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</Carousel>

const array_chunks = (array, chunk_size) => Array(Math.ceil(array.length / chunk_size)) .fill() .map((_, index) => index * chunk_size) .map((begin) => array.slice(begin, begin + chunk_size)); 
const chunks = array_chunks(SymbolData, 3);

根据我对问题陈述的理解，有两种可能的事情你想要实现

第一张：如果您想在一张幻灯片中显示所有三个图形，您应该将
symbolData
映射移动到
中，就像上面的解决方案和下面的步骤一样
由于您已经在使用页码进行切片，因此您将看到n张不同的幻灯片，根据页数，每张幻灯片有3个图形

第二张（不太可能）：您可能希望以幻灯片的全宽显示图形。为此，您需要在
中使用
xs={12}md={12}
，您的代码沙盒返回一个错误：
\u SymbolData$2.slice不是函数
仍然是这样吗？我一秒钟就收到了这个错误，但它对我有效吗？是的，它仍然显示errroThat很奇怪，相同的链接对我有效。请添加所需的输出。你想在每页上显示3个图表？嘿，谢谢你的帮助。请看我的更新帖子。虽然这很有效，但仍然有一个问题发生，因为旋转木马认为这是一个大型图形的孩子。请看我的最新答案！非常感谢，这就解决了。我有一个小问题，在渲染。如何在初始渲染时创建条件或等待数组_chuncks（）切片
symbolData
？当前正在获取
TypeError:无法读取未定义的
的属性“length”，因为数据道具尚未通过。很高兴它工作了！我无法复制上述错误，因此无法帮助您调试。如果（！SymbolData）返回null，您可能会执行类似于
的操作SymbolData
尚不存在，是否使用code>阻止调用
.length
？否则你可以问一个关于这个问题的新问题！