react-dnd拖拽块插入可放置元素数组异常及尾部插入实现问题

问题1：新增4-5个块后无法继续插入 #

根因 #

代码存在React闭包陷阱：addBlock函数依赖外部的blocks状态，若该函数传递给react-dnd相关钩子/子组件时没有正确声明依赖更新，函数内捕获的blocks始终为旧值。插入几个块之后，旧blocks数组中不存在新增块的id，findIndex返回-1，插入逻辑直接终止。

修复方案 #

修改addBlock采用setState函数式更新写法，直接从回调参数拿最新的状态，不依赖外部变量：

const addBlock = (id, newBlock) => {
  setBlocks(prevBlocks => {
    const newBlockList = [...prevBlocks];
    const targetIndex = newBlockList.findIndex(el => el.id === id);
    if (targetIndex > -1) {
      // 现在是插入到目标块上方，要插入到下方改成 targetIndex + 1 即可
      newBlockList.splice(targetIndex, 0, newBlock);
    }
    return newBlockList;
  })
};

问题2：插入位置控制+插入列表尾部实现 #

自定义插入前后逻辑 #

如果要动态判断插入到目标块的上方还是下方，可以在useDrop的hover回调中计算鼠标位置：

1. 获取当前放置元素的DOM节点的上下边界
2. 计算鼠标Y坐标在元素高度中的占比，上半部分插目标块前，下半部分插目标块后

插入列表尾部方案 #

两种常用实现：

1. 底部放置区方案：在渲染块列表的容器底部新增一个高度为4-8px的透明放置区，拖拽元素落到该区域时，直接调用以下方法插入尾部：

const appendBlock = (newBlock) => {
  setBlocks(prevBlocks => [...prevBlocks, newBlock])
}

2. 最后元素判断方案：如果当前放置的块是列表最后一个元素，且鼠标落在该块下半部分，直接执行上面的appendBlock逻辑即可。

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