React Swiper.js从数组中删除索引处的幻灯片

Question

我似乎不知道如何删除当前索引处的幻灯片，该幻灯片是使用Swiper.js从数组中呈现的。请在此处编码Sandbox链接。

我试过：

function deleteSlide() {
swiper.current.swiper.removeSlide(currentIndex);
var temp = slides;
temp.splice(currentIndex, 1);
setSlides(temp);
}

但问题是，当状态更新时，它会进行双重删除。如果我只运行removeSlide，它会删除幻灯片，但我的阵列不会更新。如果我做了其他事情，我的数组会更新，但幻灯片直到我滑动后才会更新。到目前为止，将幻灯片添加到数组的末尾效果良好。

在没有明确调用removeSlide的情况下，我尝试了以下操作：

useEffect(() => {
swiper.current.swiper.update();
}, [slides]);

但我不太确定为什么这并没有真正更新Swiper实例，根据文档，我认为这是它应该做的。我认识到，当deleteSlide中的状态更新时，也不会调用它，我也不完全确定为什么。

理想的行为是当前视图保持不变，当删除当前幻灯片时，index + 1处的幻灯片将滑动到位。如果您删除了最后一张幻灯片，那么您将滑到最后一张第二张幻灯片，最后一张将被删除。只要我能正确地更新Swiper实例，我就可以处理这个问题。

我该怎么做？感谢您的帮助，谢谢。

Answer 1

设法解决了这个问题：

function deleteSlide() {
var temp = [...slides];
temp.splice(currentIndex, 1);
setSlides(temp);
}

只需使用排列...运算符即可正确复制数组。尽管值得注意的是，这会重置所有其他渲染幻灯片的状态，但我需要弄清楚如何解决这个问题。

编辑：更新的代码沙盒。为了防止重新渲染所有其他数组元素，每个元素的键在渲染中必须是唯一的。通过将关键点设置为计数进行修复，计数是严格增加的。