使用 embla 轮播映射组件反应分页渲染

Question

所以我创建了一个搜索页面，您可以在其中显示结果集，并可以选择将结果限制为 10、25、50，如果结果多于页面上显示的数量，它会自动应用分页。它工作得很好，但后来我在结果帖子上添加了新功能，以便能够在结果页面中滚动浏览每个帖子图片，为此我使用了 embla carousel 和 vanilla-lazyload。这本身就非常有效，没有任何问题。但是当使用结果计数限制对分页功能进行回归测试时，任何减少限制并且必须删除一些对象的情况，代码都会失败并出现以下错误并重复几次。

Uncaught TypeError: Cannot read property 'removeAllEvents' of undefined

The above error occurred in the EmblaCarouselReact component:

创建的组件似乎在对象被删除后调用了一些函数。

下面是我的一段代码，它有条件地列出了帖子。

searchResult = this.state.posts.map((post, index) => {
                    if((index + 1) >= this.state.pagination.show_from && (index + 1) <= this.state.pagination.show_to){
                                    return  <div key={post.id} className = 'post-container'>
                                                <div className='post-picture'>
                                                    {!post.object.pictures[0] ? <img src='/images/posts/default-test.jpg' alt="logo"></img>
                                                    :
                                                        <LazyImageProvider>
                                                            <Carousel>
                                                            {post.object.pictures.map((image, i) => (
                                                                <LazyImage aspectRatio={[10, 6.5]} src={image.pictureSmall} key={i} />
                                                            ))}
                                                            </Carousel>
                                                        </LazyImageProvider>
                                                    }
                                                </div>
                                            </div>
                    }
                })

我以前从未遇到过这个问题，但我正在使用在线文章中的此轮播的完整解决方案，因此不知道它在后端如何工作的内幕。希望有人知道一个简单的解决方法，感谢您的帮助。我可以看到轮播代码导致了这个，如果你有替代的 superiod 轮播，我洗耳恭听。

轮播和延迟加载的代码库是： https://codesandbox.io/s/react-image-slider-d8sl1?file=/src/index.js

Answer 1

我不知道你用的是哪个版本的EmblaCarouselReact，但这可能是因为Embla实例的销毁从1.2.11版本开始就被移到了核心包中，现在组件卸载时自动完成。

因此，如果您使用 >= 版本 1.2.11 并手动销毁轮播实例，则必须像这样删除它：

useEffect(() => {
  ...

  // You'll have to remove this line
  return () => embla && embla.destroy();
}, [embla]);

这是我的一位用户在 issue 13 中提出的。

如果有帮助请告诉我。

使用 embla 轮播映射组件反应分页渲染

React paginated rendering with embla carousel mapped components

lazy-loading

carousel

reactjs