Javascript 如何更新DnD组件上的状态

我目前正在尝试使用名为的拖放库及其名为useSortable的挂钩

到目前为止，我确实实现了以我喜欢的方式拖动所有东西，不幸的是，我不可能根据拖动情况相应地更新状态

附上我的代码示例。

我很高兴听到每一个解决我问题的建议：）

从“React”导入React，{useState}；
导入“/styles.css”；
从“@dnd kit/core”导入{DndContext}；
从“@dnd kit/sortable”导入{arrayMove，SortableContext，useSortable}；
从“@dnd kit/utilities”导入{CSS}；
函数SortableItem（{item}）{
常量{id，name}=item；
常数{
属性，
听众们，
setNodeRef，
使改变
过渡
}=useSortable（{id:id}）；
常量样式={
transform:CSS.transform.toString（transform），
过渡
};
返回(

{name}的移动

);
}
导出默认函数App（）{
const[items，setItems]=useState([
{id:1，名称：“Items One”}，
{id:2，名称：“项目2”}，
{id:3，名称：“项目3”}
]);
const handleDragEnd=（事件）=>{
console.log（事件）；
const{active，over}=事件；
if（active.id！==over.id）{
设置项目（（项目）=>{
控制台日志（项目）；
constOldIndex=items.indexOf（active.id）；
const newIndex=items.indexOf（超过.id）；
const newItemsArray=arrayMove（项、旧索引、新索引）；
返回newItemsArray；
});
}
};
控制台日志（项目）；
返回(
排序示例
{items.map（（item）=>(
))}
);
}

 
import React, { useState } from "react";
import "./styles.css";
import { DndContext } from "@dnd-kit/core";
import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

function SortableItem({ item }) {
  const { id, name } = item;
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition
  } = useSortable({ id: id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition
  };

  return (
    <li ref={setNodeRef} style={style} {...attributes} {...listeners} draggable>
      Movement for {name}
    </li>
  );
}

export default function App() {
  const [items, setItems] = useState([
    { id: 1, name: "Items One" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Items 3" }
  ]);

  const handleDragEnd = (event) => {
    console.log(event);
    const { active, over } = event;

    if (active.id !== over.id) {
        setItems((items) => {
            console.log(items);
            const oldIndex = items.indexOf(active.id);
            const newIndex = items.indexOf(over.id);
            const newItemsArray = arrayMove(items, oldIndex, newIndex);
            return newItemsArray;
        });
    }
};

  console.log(items);

  return (
    <div className="App">
      <h1>Sorting Example</h1>

      <DndContext onDragEnd={handleDragEnd}>
        <SortableContext items={items}>
          {items.map((item) => (
            <SortableItem key={item.id} item={item} />
          ))}
        </SortableContext>
      </DndContext>
    </div>
  );
}