react-beautiful-dnd报错：无法找到指定id的可拖拽元素

你已经尝试过降级React到v17、移除严格模式仍未解决，问题出在代码写法错误和几个容易忽略的配置点，按以下顺序排查即可：

核心代码错误（90%概率是这个问题） #

• 你的Card.js中Draggable节点的属性绑定错误：在card-wrapper元素上错误展开了provided.droppableProps，但Draggable对应的provided对象不存在droppableProps属性，必须替换为provided.draggableProps。属性绑定错误会导致dnd库无法把拖拽标记打到对应DOM上，拖拽时找不到对应id的可拖拽元素。
• 检查List.js的返回值：你贴的代码中箭头函数使用大括号包裹函数体，但没有写return语句，会导致Droppable组件根本没有被正确渲染，如果实际代码也漏写return，需要补上。

其他排查点 #

如果修正上述写法后仍有问题，按以下顺序检查：

• 校验id唯一性：所有droppableId、draggableId必须全局唯一，跨不同列表的卡片id也不能重复；同时确认所有传入的id不为null/undefined，避免toString()执行异常。
• 保证index连续：传给Draggable的index必须和当前渲染的列表顺序完全一致，如果你在map前对tasks做了过滤、排序操作，不要用原始数据的索引，要使用map回调返回的实时index。
• 不要在拖拽过程中改数据：仅在onDragEnd回调触发后再更新列表状态，onDragStart、onDragUpdate阶段不要修改tasks、notes等关联渲染的数据源，否则会导致dnd内部缓存的DOM引用和实际页面元素不匹配。
• 排查样式冲突：临时移除卡片、列表容器上的transform、position: fixed、will-change: transform这类会改变合成层的CSS属性，这类属性会干扰dnd的元素位置计算，导致元素查找失败。

修正后的核心代码 #

List.js #

const List = ({ id, title, tasks, notes, setNotes }) => {
  // 补全return返回
  return (
    <Droppable droppableId={id.toString()}>
      {(provided) => (
        <div
          className="cards"
          {...provided.droppableProps}
          ref={provided.innerRef}
        >
          {tasks.map((item, index) => {
            return (
              <Card
                key={item.id}
                id={item.id}
                index={index}
                message={item.message}
              />
            );
          })}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  )
}

Card.js #

const Card = ({ id, index, message }) => {
  return (
    <Draggable draggableId={id.toString()} index={index}>
      {(provided) => (
        <div
          className="card-wrapper"
          {/* 替换错误的droppableProps为draggableProps */}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
        >
          <div className="card-message">{message}</div>
        </div>
      )}
    </Draggable>
  );
};

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