React Drag and Drop问题：左侧列表项移至右侧无数据显示

问题场景 #

我有左右两个列表，需求是把左侧列表的项拖拽到右侧列表。左侧数据源如下：

const data = [
  { name: "Item A 1", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item B 2", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item C 3", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item D 4", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item E 5", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item F 6", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item G 7", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item H 8", checked: false, array: ['value 1', 'value 2']  },
]

运行后界面显示左右两个可拖拽列表，但将左侧任意项拖到右侧后，右侧无法获取到对应的数据对象，无法正确渲染内容。

问题根源 #

查看代码后发现，拖拽过程中传递的是列表项的索引而非完整数据对象：

• 左侧拖拽源的beginDrag方法返回的是当前项的索引，不是data数组里的完整对象；
• 右侧放置目标接收数据时，直接把索引值添加到了右侧数组，没有根据索引去原数据中取出对应的对象，导致右侧存储的是索引而非实际需要的数据。

修复步骤 #

1. 修改拖拽传递的数据
   在左侧列表的拖拽源配置中，把beginDrag返回的item改为对应的数据对象：

   // 错误写法
   beginDrag: (props) => ({
     item: props.index
   })
   
   // 正确写法
   beginDrag: (props) => ({
     item: props.item
   })
   

2. 调整右侧接收逻辑
   右侧列表的放置目标drop方法中，直接将接收到的完整对象添加到右侧数组（如果addItem逻辑是直接追加对象，此步骤无需额外修改，只需确保传递的是对象即可）：

   drop: (props, monitor) => {
     const item = monitor.getItem();
     props.addItem(item);
   }
   

3. 同步左侧数据（可选）
   如果需要将拖拽的项从左侧移除，可在拖拽完成后，通过对象的唯一标识（比如name字段）从左侧数组中删除对应项，保证左右数据同步。

验证结果 #

修改完成后，拖拽左侧项到右侧时，右侧列表将正确获取到完整的对象数据，能够正常渲染项的名称及其他属性。

内容的提问来源于stack exchange，提问作者alex