Javascript 如何限制旋转木马中的页面数量？

如何将每个转盘的页数配置为限制

noofpage

？我不知道如何在下面的函数中实现这一点

  const itemsPerPage = 6;
  const [page, setPage] = React.useState(1);
  const [noOfPages] = React.useState(
    Math.ceil(data[0]?.length / itemsPerPage)
  );

  const handleChangePage = (event, value) => {
    setPage(value);
  };

  const next = (event, value) => {
    setPage(page + 1);
  };

  const prev = (event, value) => {
    setPage(page - 1);
  };

return(
          <Carousel
            onClick={handleChangePage}
            next={next}
            prev={prev}
            indicators
            cycleNavigation
            swipe
            animation="slide"
          >
)

---

还添加了一个沙盒来表示问题的当前状态：

您需要在

next

和

prev

方法中设置一个最大值，您不能无限增加页面。做点像

//如果您不希望转盘在到达第一页/最后一页时循环
const noLoopNext=（事件、值）=>{
设置页面（（当前页面）=>{
if（currPage+1>Math.ceil（SymbolData.length/itemsPerPage））{
返回页面；
}否则{
返回页面+1；
}
});
};
const noLoopPrev=（事件、值）=>{
设置页面（（当前页面）=>{
如果（当前页面===1）{
返回页面；
}否则{
返回第1页；
}
});
};
//如果你想让它循环
const loopNext=（事件、值）=>{
设置页面（（当前页面）=>{
if（currPage+1>Math.ceil（SymbolData.length/itemsPerPage））{
返回1；
}否则{
返回页面+1；
}
});
};
const loopPrev=（事件、值）=>{
设置页面（（当前页面）=>{
如果（当前页面===1）{
返回Math.ceil（SymbolData.length/itemsPerPage）；
}否则{
返回第1页；
}
});
};

你不需要为它创建一个状态，如果

Carousel

接受了一个限制，那么只需将

Math.ceil（数据[0]？.length/itemsPerPage）

直接作为一个道具传递给它。Carousel不接受限制：你可能希望在帖子中包含

Carousel

是来自材质UI的。在本例中，您可以将数据数组划分为

itemsPerPage

定义的长度块，请参阅：我更新了我的文章，介绍了这个库的来源。需要明确的是，MaterialUI并没有开发这个库。它是一个由独立开发人员创建的第三方库。@gptt916，这实际上是我所做的，我当前的上述设置的问题是，该状态混淆了旋转木马，使其不断递增（更改幻灯片/页面）即使它没有内容显示。当我添加你的代码时，我得到一个“预期的赋值或函数调用，而不是看到一个表达式”抱歉，我编辑了代码以使其更干净，但在前面忘记了一个

return

关键字，已编辑。我不确定我是否理解你的代码，currPage是从哪里来的？当我实现此代码段时，转盘似乎没有移动。

currPage

是对react状态挂钩使用函数更新的一部分，请参阅：。你能创造一个新的世界吗？我想我需要更多的代码来帮助你。嘿，尼克，谢谢你帮我。请签出此沙箱：

          <Carousel
            onClick={handleChangePage}
            next={next}
            prev={prev}
            indicators
            cycleNavigation
            swipe
            animation="slide"
          >
            <Grid container spacing={5} alignItems="flex-end">
              {data[0]?.slice((page - 1) * itemsPerPage, page * itemsPerPage)
                .map((data, index) =>
                {
                      return (
                      
                        <Grid item key={index} xs={4} md={4}>
                            <Card>
                            <CardHeader
                            title={<Chip label={data.symbol} />} 
                            subheader={data.adj_close}        
                            />      
                            <CardContent >
                                <div>
                              <MiniGraphs
                                historicalPrice={historicalPrice.filter(i => i.symbol === data.symbol)}
                                dateRange={date}
                              />
                                </div>              
                            </CardContent>
                            </Card>
                        </Grid>
                    );
                })}
        </Grid>
        </Carousel>