Javascript OnDrop事件在html表中触发了两次

这是一个数组，在该数组中，它被赋予表以动态呈现

  let columns = [
    {
      text: "Id",
      dataField: "id",
     
    },
    { text: "Name", dataField: "name" },
    {
      text: "Gender",
      dataField: "Gender",
    },
   
  ];

我有一个像这样的

th标记

，它是react代码的一部分，它基本上呈现表格。它通过数组动态呈现

            {col.map((col, i) => {
              return (
                <th
                  draggable
                  scope="col"
                  key={col.text}
                  className={dragging ? getStyles(col.dataField) : "text"}
                  onDragStart={(e) => ondragstart(e, col.dataField)}
                  onDragEnd={(e) => handledragend(e, col.dataField)}
                  onDragOver={(e) => handledragover(e,"#")}
                  onDrop={
                    dragging ? (e) => handledragdrop(e, col.dataField) :null
                    
                  }
                >
                  {col.text}
                </th>
              );
            })}

{col.map（（col，i）=>{
返回(
ondragstart（e，col.dataField）}
onDragEnd={（e）=>handledragend（e，col.dataField）}
onDragOver={（e）=>handledragover（e，“#”）}
昂德罗普={
拖动？（e）=>handledragdrop（e，列数据字段）：空
}
>
{col.text}
);
})}

启动ondragstart时，拖动设置为true

以下是我的拖放事件侦听器

const ondragstart = (e: any, colname: any) => {
   
    dragItem.current = colname;
    Setdragging(true);
  };
  const handledragdrop = (
    e:any,
    colname: string
  ) => {
    e.preventDefault()
    
    let currentitem = dragItem.current;          //holds the item which is currently dragging
    let hoveritem = colname;                     // holds the item on which the current item hovers to
    let currentitemindex = col.findIndex(
      (newcol) => newcol.dataField === currentitem
    );
    let hoveritemindex = col.findIndex(
      (newcol) => newcol.dataField === hoveritem
    );
   

    if (colname !== dragItem.current) {
      Setcol((col) => {
        let newcol: any;
        newcol = col;
       
       
        [newcol[currentitemindex],newcol[hoveritemindex]=[newcol[hoveritemindex],newcol[currentitemindex]]     /// swapping the hovered item and current item
       
        
        return newcol;
      });
    }
  };
  const handledragend = (
    e: React.DragEvent<HTMLTableHeaderCellElement>,
    colname: string
  ) => {
    Setdragging(false);
    dragItem.current = null;
  };
  const handledragover =(e: React.DragEvent<HTMLTableHeaderCellElement>,colname: string) =>
  {
    e.preventDefault()
   
    
  }

const ondragstart=（e:any，colname:any）=>{
dragItem.current=colname；
设置拖动（true）；
};
常量handledragdrop=(
e:有吗，
colname:string
) => {
e、 预防默认值（）
让currentitem=dragItem.current；//保存当前正在拖动的项
let hoveritem=colname；//保存当前项悬停到的项
让currentitemindex=col.findIndex(
（newcol）=>newcol.dataField===currentitem
);
设hoveritemindex=col.findIndex(
（newcol）=>newcol.dataField===hoveritem
);
if（colname！==dragItem.current）{
Setcol（（col）=>{
让纽科尔：任何；
newcol=col；
[newcol[currentitemindex]，newcol[hoveritemindex]=[newcol[hoveritemindex]，newcol[currentitemindex]]///交换悬停项和当前项
返回newcol；
});
}
};
常量句柄=(
e:React.DragEvent，
colname:string
) => {
设置拖动（假）；
dragItem.current=null；
};
const handledragover=（e:React.DragEvent，colname:string）=>
{
e、 预防默认值（）
}

如果需要做任何更改，请让我知道