时间戳

首页 > 解决方案 > 使用 embla carousel 映射组件对分页渲染进行反应

reactjs - 使用 embla carousel 映射组件对分页渲染进行反应

问题描述

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

未捕获的类型错误：无法读取未定义的属性“removeAllEvents”

EmblaCarouselReact 组件出现上述错误：

在已经删除对象之后，创建的组件似乎正在调用某些函数。

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

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>
                    }
                })

我以前从来没有遇到过这个问题，但是我正在使用来自在线文章的这个轮播的完整解决方案，因此不知道它在后端是如何工作的。希望有人知道一个简单的解决方法，感谢您的帮助。我可以看到轮播代码导致了这种情况，如果您有替代的超周期轮播，我会全神贯注。

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

标签： reactjscarousellazy-loading

解决方案

我不知道EmblaCarouselReact您使用的是哪个版本，但这可能是因为自 1.2.11 版本以来，Embla 实例的销毁已移至包核心，并且现在在组件卸载时自动完成。

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

useEffect(() => {
  ...

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

这是我的一位用户在第 13 期提出的。

让我知道它是否有帮助。

推荐阅读