1

我想获取当前的幻灯片索引，所以我正在尝试使用 CarouselContext。这是我从文档中得到和使用的：

const carouselContext = useContext(CarouselContext);
const [currentSlide, setCurrentSlide] = useState(carouselContext.state.currentSlide);
  
useEffect(() => {
  function onChange() {
    setCurrentSlide(carouselContext.state.currentSlide);         
    console.log(currentSlide)
  }
  carouselContext.subscribe(onChange);
  return () => carouselContext.unsubscribe(onChange);
}, [carouselContext]);

return <CarouselProvider style={{ height: 'fit-content', marginLeft: '10%', marginRight: '10%'}} 
  isPlaying={true}
  infinite={true} 
  naturalSlideHeight={125} 
  naturalSlideWidth={100} 
  isIntrinsicHeight={true} 
  lockOnWindowScroll={true} 
  totalSlides={3} 
  visibleSlides={1} 
  currentSlide={1}
>
  <Slider style={{padding: '19px 260px'}}>
    <Slide index={0}>
      <TestimonialCard/>
    </Slide>
    <Slide index={1}>
      <TestimonialCard/>
    </Slide>
    <Slide index={2}>
      <TestimonialCard/>
    </Slide>
  </Slider>
</CarouselProvider>

但是当我运行这段代码时，这就是我得到的：

TypeError: Cannot read properties of undefined (reading 'state')

显然， carouselContext 未定义，尝试读取 carouselContext.state.currentSlide 给了我这个错误。我怎样才能解决这个问题？

4

0 回答 0