react-beautiful-dnd无法拖拽的一个兼容场景

就这么个东西，拖拽排序的一个列表，但它就是不听使唤

直接上代码

拖拽部位的代码，平平无奇，复制粘贴毫无技术含量，但是弄死都没办法移动。

<DragDropContext onDragEnd={handleDragEnd}>
        <Droppable droppableId="droppabled">
          {provided => (
            <Container ref={provided.innerRef} {...provided.droppableProps}>
              {items.map((t, i) => (
                <Draggable draggableId={t.id} key={i} index={i}>
                  {p => (
                    <Item
                      ref={p.innerRef}
                      {...p.draggableProps}
                      {...p.dragHandleProps}
                      key={t.id}
                    >
                      {t.text}
                    </Item>
                  )}
                </Draggable>
              ))}
            </Container>
          )}
        </Droppable>
      
      </DragDropContext>

解决方案：

百度、google、AI问麻了，最终定位如下！！！！

React18版本的锅
APP.tsx 入口文件中用到了这么个玩意儿 React.StrictMode
AI给出的解释：有时，React.StrictMode可能会导致与react-beautiful-dnd库的冲突或意外行为。

root.render(
  // <React.StrictMode>
    <App />
  // </React.StrictMode>
);

注释掉就解决了。
此时的心情—