Reactjs 什么'；这个react引导转盘组件有什么问题？

我正在尝试通过react引导创建旋转木马，但在页面上呈现时遇到问题：

这是我代码的一部分：

this.slides.map((slide, index) => ({
    <Carousel.Item >
       <Row className="item-container carousel-item d-flex flex-xl-column flex-wrap">
          {
            slide.map(category => { // slide is not defined
               return (                                            
                 <Col className="px-2 category__card" xl={category.xl} md={category.md}>
                   <Card className="p-2" style={category.style}>
                       <Card.Body>
                         <Card.Title className="text-white font-weight-normal text-uppercase ">
                           <h4>
                              category.title}
                           </h4>
                         </Card.Title>
                         <Button variant="light rounded-0" >View Products</Button>    
                      </Card.Body>
                      <div className="card-image-cont">
                         <Card.Img  src={category.img} className="card-image"/>
                      </div> 
                   </Card>  
                 </Col>
              );
            })
          }
       </Row>
    </Carousel.Item> 
 }))

我得到这个错误

幻灯片没有定义

，我在这里做错了什么？我在

幻灯片中循环浏览每个项目，以创建多个旋转木马项目
每个旋转木马项目都应该包含多个类别，但不知道为什么会出现此错误。。可能是我不了解JSX的某些方面。
您的代码至少有两个问题

第一个是有一个额外的括号：
this.slides.map（（slide，index）=>（{…}））
应该是
this.slides.map（（slide，index）=>{…}）

第二个是在外部
map（）
函数中不返回任何内容：
this.slides.map（（slide，index）=>{…}）
应该是
this.slides.map（（slide，index）=>{return（…）}
。因此（假设您的整个代码都包装在
return（）
方法中），您的代码将如下所示：

slides = [
   [
     {
       title: 'laptops',
       img: images.laptop,
       md: 6,
       xl: 3,
       style: {
         "background": "red",
         "height": "100%"
       }
     },


    {

       title: 'mobiles',
       img: images.mobile,
       md: 6,
       xl: 4,
       style: {
         "background": "#c4dd60",
         "height": "100%",
         "margin-bottom": "0.5em;"
       }
    }
 ],
 [
     {
       title: 'laptops',
       img: images.laptop,
       md: 6,
       xl: 3,
       style: {
         "background": "red",
         "height": "100%"
       }
     },


    {

       title: 'mobiles',
       img: images.mobile,
       md: 6,
       xl: 4,
       style: {
         "background": "#c4dd60",
         "height": "100%",
         "margin-bottom": "0.5em;"
       }
    }
 ]

]

this.slides.map((slide, index) => {
    return (
     <Carousel.Item>
       <Row className="item-container carousel-item d-flex flex-xl-column flex-wrap">
          {
            slide.map(category => { // slide is not defined
               return (                                            
                 <Col className="px-2 category__card" xl={category.xl} md={category.md}>
                   <Card className="p-2" style={category.style}>
                       <Card.Body>
                         <Card.Title className="text-white font-weight-normal text-uppercase ">
                           <h4>
                              category.title}
                           </h4>
                         </Card.Title>
                         <Button variant="light rounded-0" >View Products</Button>    
                      </Card.Body>
                      <div className="card-image-cont">
                         <Card.Img  src={category.img} className="card-image"/>
                      </div> 
                   </Card>  
                 </Col>
              );
            })
          }
       </Row>
    </Carousel.Item> 
)})

this.slides.map（（幻灯片，索引）=>{
返回(
{
slide.map（类别=>{//slide未定义
报税表（
类别.标题}
查看产品
);
})
}
)})

是一个基于您的代码的简单示例。希望这对你有帮助