pure-react-carousel无法消费CarouselContext获取当前轮播索引如何解决

架构老林

2026-10-3

问题根因

CarouselContext 只能在 <CarouselProvider> 组件包裹的后代组件中消费。你当前的代码在同一个组件内既调用 useContext(CarouselContext) 又返回 CarouselProvider，调用useContext的组件不在Provider的作用域内，自然拿到的是undefined。

修复步骤

1. 拆分组件，把Context消费逻辑抽离为独立子组件

// 子组件：在Provider内部渲染，可正常消费Context
const CarouselContent = () => {
  const carouselContext = useContext(CarouselContext);
  const [currentSlide, setCurrentSlide] = useState(carouselContext?.state?.currentSlide ?? 0);
  
  useEffect(() => {
    if (!carouselContext) return;
    function onChange() {
      const newSlide = carouselContext.state.currentSlide;
      setCurrentSlide(newSlide);         
      console.log(newSlide); // 不要直接打印currentSlide，useState更新是异步的，直接打印会拿到旧值
    }
    carouselContext.subscribe(onChange);
    return () => carouselContext.unsubscribe(onChange);
  }, [carouselContext]);

  return (
    <Slider style={{padding: '19px 260px'}}>
      <Slide index={0}>
        <TestimonialCard/>
      </Slide>
      <Slide index={1}>
        <TestimonialCard/>
      </Slide>
      <Slide index={2}>
        <TestimonialCard/>
      </Slide>
    </Slider>
  )
}

2. 外层组件仅保留CarouselProvider，引入抽离的子组件

// 外层父组件：仅负责渲染Provider并传入配置
const YourParentComponent = () => {
  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}
    >
      {/* 子组件在Provider内部，可正常获取Context */}
      <CarouselContent />
    </CarouselProvider>
  )
}