在不重置状态的情况下删除与数组映射的 SwiperJS 中的幻灯片
Deleting a slide in SwiperJS mapped with an array without the state resetting
我已经为这个问题苦苦思索了一段时间，但一直没能弄明白。 Code Sandbox demo here.
我有一组使用 SwiperJS 呈现的幻灯片。我需要通过映射一个数组来渲染它。我已经能够成功地将 push 推到这个数组的后面，但是删除是个问题。有两种方法可以做到这一点。首先，我可以通过更改数组的状态来删除特定索引处的元素。这“有效”，但问题是 每个渲染组件的状态未保存。
我知道有一个 removeSlide() function 但问题是数组映射会变得混乱，因为如果我也从我的数组中删除，这是一个双重删除。
现在我认为在我的状态下直接修改数组是可行的方法，但是正在渲染的组件都重置了它们的状态，这是一个问题。在链接的沙盒中，您可以通过添加任意数量的幻灯片、随机化每张幻灯片的状态，然后删除当前幻灯片来重现这一点。由于重新渲染，它们的所有状态都将被重置。
这是一个发生的视频。在这个视频中，我添加了一张幻灯片，随机化了两张幻灯片的状态，然后删除了第一张幻灯片。第二张幻灯片（现在是第一张幻灯片）的状态将被重置。这发生在任意数量的幻灯片上：
真诚感谢任何帮助，谢谢！
Updated Code Sandbox。为了防止重新渲染所有其他数组元素，每个元素的键在渲染中必须是唯一的。通过将键设置为严格递增的计数来修复。
我错过了一个非常重要的事实，对于非静态数组，你不能使用数组的索引作为键，因为这会在元素为 reshuffled/deleted 时触发重新渲染，因此键应该对每个元素都是唯一的，并且在数组更改时保持不变。在大多数用例中，基于递增计数器的简单 ID 都适用于此。
我已经为这个问题苦苦思索了一段时间，但一直没能弄明白。 Code Sandbox demo here.
我有一组使用 SwiperJS 呈现的幻灯片。我需要通过映射一个数组来渲染它。我已经能够成功地将 push 推到这个数组的后面，但是删除是个问题。有两种方法可以做到这一点。首先，我可以通过更改数组的状态来删除特定索引处的元素。这“有效”，但问题是 每个渲染组件的状态未保存。
我知道有一个 removeSlide() function 但问题是数组映射会变得混乱，因为如果我也从我的数组中删除，这是一个双重删除。
现在我认为在我的状态下直接修改数组是可行的方法，但是正在渲染的组件都重置了它们的状态，这是一个问题。在链接的沙盒中，您可以通过添加任意数量的幻灯片、随机化每张幻灯片的状态，然后删除当前幻灯片来重现这一点。由于重新渲染，它们的所有状态都将被重置。
这是一个发生的视频。在这个视频中，我添加了一张幻灯片，随机化了两张幻灯片的状态，然后删除了第一张幻灯片。第二张幻灯片（现在是第一张幻灯片）的状态将被重置。这发生在任意数量的幻灯片上：
真诚感谢任何帮助，谢谢！
Updated Code Sandbox。为了防止重新渲染所有其他数组元素，每个元素的键在渲染中必须是唯一的。通过将键设置为严格递增的计数来修复。
我错过了一个非常重要的事实，对于非静态数组，你不能使用数组的索引作为键，因为这会在元素为 reshuffled/deleted 时触发重新渲染，因此键应该对每个元素都是唯一的，并且在数组更改时保持不变。在大多数用例中，基于递增计数器的简单 ID 都适用于此。