Reactjs 使用embla carousel映射组件进行分页渲染
所以我创建了一个搜索页面,您可以在其中显示结果集,并可以选择将结果限制为10、25、50,如果结果多于页面上显示的结果,它会自动应用分页。它工作得很好,但后来我在结果帖子上添加了新功能,可以在结果页面中滚动每个帖子的图片,为此我使用了embla carousel和vanilla lazyload。它本身运行得非常好,没有任何问题。但是,当使用result count limit对分页功能进行回归测试时(在任何情况下,如果您降低了限制并且必须删除一些对象),代码都会失败,并出现以下错误,并且会重复几次 未捕获的TypeError:无法读取未定义的属性“removeAllEvents” EmblaCarouselReact组件中出现上述错误: 似乎创建的组件在对象被移除后正在调用某些函数 下面是我的一段代码,它有条件地列出了帖子Reactjs 使用embla carousel映射组件进行分页渲染,reactjs,carousel,lazy-loading,Reactjs,Carousel,Lazy Loading,所以我创建了一个搜索页面,您可以在其中显示结果集,并可以选择将结果限制为10、25、50,如果结果多于页面上显示的结果,它会自动应用分页。它工作得很好,但后来我在结果帖子上添加了新功能,可以在结果页面中滚动每个帖子的图片,为此我使用了embla carousel和vanilla lazyload。它本身运行得非常好,没有任何问题。但是,当使用result count limit对分页功能进行回归测试时(在任何情况下,如果您降低了限制并且必须删除一些对象),代码都会失败,并出现以下错误,并且会重复
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>
}
})
searchResult=this.state.posts.map((post,index)=>{
如果((索引+1)>=this.state.pagination.show_from&&(索引+1)(
))}
}
}
})
我以前从未遇到过这个问题,但我正在使用一个完整的解决方案来解决这篇在线文章中的旋转木马,因此不知道它在后端是如何工作的。希望有人知道一个简单的解决方法,谢谢你的帮助。我可以看到传送带代码导致了这种情况,如果你有替代的高级传送带,我洗耳恭听
转盘和延迟加载的代码库为:
我不知道您使用的是哪个版本的
EmblaCarouselReact
,但这可能是因为Embla实例的销毁从1.2.11版起就被移动到了包核心中,现在在卸载组件时会自动完成
因此,如果您正在使用=version 1.2.11并手动销毁旋转木马实例,则必须将其删除,如下所示:
useffect(()=>{
...
//您必须删除这条线
return()=>embla&&embla.destroy();
},[embla]);
这是我的一个用户在中提出的
如果有帮助,请告诉我。我不知道您使用的是哪个版本的
EmblaCarouseReact
,但这可能是因为Embla实例的销毁从1.2.11版起就被移动到包核心中,现在在卸载组件时会自动完成
因此,如果您正在使用=version 1.2.11并手动销毁旋转木马实例,则必须将其删除,如下所示:
useffect(()=>{
...
//您必须删除这条线
return()=>embla&&embla.destroy();
},[embla]);
这是我的一个用户在中提出的
如果有帮助,请告诉我