React Beautiful Dnd :删除项目后，源和目标索引未定义

React Beautiful Dnd是一个用于实现拖拽和重新排序功能的React库。它提供了一种简单而强大的方式来处理拖拽操作，并且能够自动处理元素的重新排序。

在使用React Beautiful Dnd时，如果在删除项目后源和目标索引未定义，这通常是由于删除操作引起的。当删除一个项目后，源和目标索引会发生变化，因此在删除后访问这些索引会导致未定义的错误。

为了解决这个问题，可以在删除项目后更新源和目标索引。具体的实现方式取决于你的应用程序的逻辑和数据结构。以下是一种可能的解决方案：

在删除项目之前，记录要删除的项目的索引。
删除项目。
更新源和目标索引，使其反映出删除操作后的新状态。

以下是一个示例代码片段，演示了如何在React Beautiful Dnd中处理删除项目后的源和目标索引未定义的问题：

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialItems = [
  { id: 'item-1', content: 'Item 1' },
  { id: 'item-2', content: 'Item 2' },
  { id: 'item-3', content: 'Item 3' },
];

const App = () => {
  const [items, setItems] = useState(initialItems);

  const handleDragEnd = (result) => {
    const { source, destination } = result;

    // 如果没有有效的目标位置，则不执行任何操作
    if (!destination) {
      return;
    }

    // 更新源和目标索引
    const updatedItems = Array.from(items);
    const [removed] = updatedItems.splice(source.index, 1);
    updatedItems.splice(destination.index, 0, removed);

    setItems(updatedItems);
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div ref={provided.innerRef} {...provided.droppableProps}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default App;

在这个示例中，我们使用useState钩子来管理项目的状态。在handleDragEnd函数中，我们首先检查是否有有效的目标位置。然后，我们使用Array.from方法创建了一个副本数组，并使用splice方法更新了源和目标索引。最后，我们使用setItems函数更新项目的状态。

这只是一个简单的示例，你可以根据你的具体需求进行修改和扩展。如果你想了解更多关于React Beautiful Dnd的信息，可以访问腾讯云的React Beautiful Dnd产品介绍页面：React Beautiful Dnd产品介绍。

请注意，以上答案仅供参考，具体的解决方案可能因应用程序的不同而有所变化。在实际开发中，建议根据具体情况进行调整和优化。