WithStore:无法读取未定义(pure-react-carousel)的属性“”state“”

Question

我使用pure-react-carousel库并尝试通过我的按钮的onClick方法导航到特定的幻灯片。

请向我解释如何使用setStoreState，因为我试着自己做(正如文档中所写的那样)，并且我使用它的整个页面都是看不见的。我试着使用this.props.carouselStore.setStoreState({ currentSlide: 2 })。

当我添加导出withStore时，我的页面变得不可见。我得到了下面的错误。

Error is Uncaught TypeError: Cannot read property 'state' of undefined
my export
    export default WithStore(MyComponent, state => ({
        currentSlide: state.currentSlide,
      }));

Answer 1

我实际上是Pure React Carousel的作者。

仅当WithStore()是<CarouselProvider />的子级时，它才有效

WithStore访问React的context API。CarouselProvider创建上下文。创建上下文时，React仅将上下文向下传递到创建上下文的组件的子组件。

因此，在这个伪代码示例中使用WithStore会给出错误。

<YourComponentThatUsesTheWithStoreHOC />
<CarouselProvider>
  // all your buttons, slides, dots, etc...
</CarouselProvider>

这也会给你这个错误。

<CarouselProvider>
  // all your buttons, slides, dots, etc...
</CarouselProvider>
<YourComponentThatUsesTheWithStoreHOC />

这个伪代码示例将会起作用

<CarouselProvider>
  // all your buttons, slides, dots, etc...
  <YourComponentThatUsesTheWithStoreHOC />
</CarouselProvider>

Answer 2

括号是不必要的。试试这个：

export default WithStore(MyComponent, state => {
    currentSlide: state.currentSlide,
  });