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

Question

我似乎无法弄清楚如何删除使用 Swiper.js 从数组呈现的当前索引处的幻灯片。 Code Sandbox link here.

我试过：

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 实例，according to the docs that's what I believe it should be doing。我认识到当 deleteSlide 中的状态更新时也不会调用它，我不完全确定为什么。

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

我该怎么办？感谢任何帮助，谢谢。

Answer 1

设法解决这个问题：

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

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

编辑：Updated Code Sandbox。为了防止重新渲染所有其他数组元素，每个元素的键在渲染中必须是唯一的。通过将键设置为严格递增的计数来修复。

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

React Swiper.js Deleting slide at index rendered from array

reactjs

swiper