React无法读取地图属性

Question

代码在下面。我正在尝试为产品页面制作轮播。我正在制作它，只需单击一下按钮就可以在不同的产品中滑动。我最初尝试在其中使用jQuery，刮开了这个想法，现在在反应中构建它，对此我几乎没有经验。帮助。 地图功能有问题吗？什么是地图功能？

const slides = [
    { index: 0,
      background: 'green',
      img: imageList.TurdBurgler, 
      price: '$5.00',
      title: 'Turd Burgler',
      category: 'stranger',
      calories: '789 calories',
      description: 'Two chocolate cake donuts smothered in cookie butter glaze. Oreo chocolate chip cookie dough. With fudge drizzle.'
    }
]
class ProductSlider extends React.Component {
    constructor(props) {
      super(props);
      this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };

      changeSlides(change) {
        window.clearTimeout(this.changeTO);
        const { length } = this.props.slides;
        const prevSlide = this.state.activeSlide;
        let activeSlide = prevSlide + change;
        if (activeSlide < 0) activeSlide = length - 1;
        if (activeSlide >= length) activeSlide = 0;
        this.setState({ activeSlide, prevSlide });
      }
      render() {
        const { activeSlide, prevSlide, sliderReady } = this.state;

        return(
            <div ClassName="product-body">
                <header>
                    <NavBar></NavBar>
                </header>
                <div className={('slider', {'s--ready': sliderReady})}>
                    <div className="carousel_nav">
                        <span id="moveLeft" className="slider__control" onClick={() => this.changeSlides(-1)}>
                            <svg className="carousel__icon" width="15" height="26" viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.8507 24.0657L2 13.215L12.8507 2.36432" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <span id="moveRight" className="slider__control slider__control__right" onClick={() => this.changeSlides(1)}>
                            <svg className="carousel__icon" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.4109 3.00001L24.0779 14.0312L13.0467 24.6983" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                    </div>
                    <div className="slider__slides pages">
                        {this.props.slides.map((slide,index) =>(
                            <div
                            className={('slider__slide', {'s--active':activeSlide ===index, 's--prev': prevSlide===index})}
                            key={slide.index}>
                            <div className="carousel-item ProductItem">
                              <div className="ImgWrap ImageWrap">
                                <img src={slide.img} className="carousel-item-image"></img>
                                <div className="ImgShadow"></div>
                                  </div>  
                                  <div className="ProductInfo carousel-info">
                                    <div className="ProductTop carouself-item-top" id="carouself-info-top">
                                        <h2 className="ProductPrice item_price">
                                        {slide.price}</h2>
                                        <h1 className="ProductTitle item_title">{slide.title}</h1>
                                        <div className="ProductCategoryCalories item-category-info">
                                            <h3 className="ProductCategory item_category">{slide.category}</h3>
                                            <h3 className="ProductCalories item_calories">{slide.calories}</h3>
                                        </div>
                                    </div>
                                    <p className="ProductDescrip item_description">{slide.description}</p>
                                    <div className="ProductQty product-qty">
                                        <h4 className="QtyTitle qty_title">QUANTITY</h4>
                                        <Quantity className="QtyPicker"></Quantity>
                                    </div>
                                    <button className="CheckOutBtn addToBag">
                                        <h2>ADD TO BAG</h2>
                                    </button>
                                  </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        )
    }
}
export default ProductSlider;