Question

因此，我创建了一个搜索页面，在该页面上显示结果集，并具有将结果限制为10、25、50的选项，如果结果比页面上显示的更多，它将自动应用分页。它运行完美，但是后来我在结果栏中添加了新功能，以便能够在结果页面中滚动浏览每个文章图片，为此，我使用了embla轮播和vanilla-lazyload。单独运行确实很好，没有问题。但是，当使用结果计数限制对分页功能进行回归测试时，在任何减少限制并必须删除某些对象的情况下，代码都会失败并显示以下错误，并重复几次。

未捕获的TypeError：无法读取未定义的属性'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

Answer 1

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

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

useEffect(() => {
  ...

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

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

让我知道是否有帮助。

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

1 个答案: