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

【问题标题】：React Swiper.js Deleting slide at index rendered from arrayReact Swiper.js 在从数组呈现的索引处删除幻灯片
【发布时间】：2021-05-12 20:12:03
【问题描述】：

我似乎无法弄清楚如何删除当前索引处的幻灯片，该幻灯片是使用 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 实例，我就可以解决这个问题。

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

【问题讨论】：

标签： reactjs swiper

【解决方案1】：

设法解决了这个问题：

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

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

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

【讨论】：