useState 未按预期工作 - 状态中的 selectedElement 正在重置为启动时提供的初始值

Question

I have two events drag start and drag end. At the time of drag start I am deciding whether to move it or copy depending on some logic and setSelectedElement is running and setting the new element to it but as you can see console of new element in drag end and console for previously selected in drag start are both empty.

after some debugging, I found out it is turning to an empty string supplied in the very beginning of use state.

App.js

export default function App() {
  const [selectedElement, setSelectedElement] = useState("");
  const [diffX, setDiffX] = useState(0);
  const [diffY, setDiffY] = useState(0);
  const [group, setGroup] = useState([]);


    useEffect(() => {
        console.log("selected element changed");
      }, [selectedElement]);

    const handleDragStart = (event) => {
        console.log("drag start ");
    
        // console.log("class list", event.currentTarget.classList);
        console.log("previous selected element is ", selectedElement);
        let functionalityType = "";
        let elementSelected = "";
        let classList = event.currentTarget.classList;
        for (let i = 0; i < classList.length; i++) {
          //move element
          if (classList[i].includes("group")) {
            functionalityType = "move";
            break;
          }
        }
    
        if (functionalityType !== "move") {
          console.log("inside copy");
          elementSelected = event.currentTarget.cloneNode(true);
          elementSelected.style.position = "absolute";
          elementSelected.addEventListener("dragstart", handleDragStart);
          elementSelected.addEventListener("dragend", handleDragEnd);
        } else {
          console.log("inside move");
          elementSelected = event.currentTarget;
          // console.log("event current target", event.currentTarget);
        }
    
        setDiffX(event.clientX - event.currentTarget.getBoundingClientRect().left);
        setDiffY(event.clientY - event.currentTarget.getBoundingClientRect().top);
        setSelectedElement(elementSelected);
      };
    
      const handleDragEnd = (event) => {
        console.log("drag end");
    
        let newElement = selectedElement;
    
        console.log("new element is", newElement);
    
        newElement.style.top = event.clientY - diffY + "px";
        newElement.style.left = event.clientX - diffX + "px";
    
        document.getElementById("MidArea").appendChild(newElement);
      }

    return (
    
        <div
                draggable={true}
                onDragStart={props.handleDragStart}
                onDragEnd={props.handleDragEnd}
                className="draggable"
              >);
    }

Answer 1

Is there any reason you're doing setSelectedElement(elementSelected); outside else statement

Your code lacks some details to debug and find the missing piece however, drag and drop, I had this implemented sometime back, try the below

const stopDrag = () => {
    document.onmouseup = null;
    document.onmousemove = null;
};

export const dragComponent = (dragRef) => {
    let coordinateOne = 0;
    let coordinateTwo = 0;
    let coordinateThree = 0;
    let coordinateFour = 0;

    const dragHandle = dragRef.current;

    const elementDrag = (event) => {
        event.preventDefault();
        coordinateOne = coordinateThree - event.clientX;
        coordinateTwo = coordinateFour - event.clientY;
        coordinateThree = event.clientX;
        coordinateFour = event.clientY;
        dragHandle.style.top = `${dragHandle.offsetTop - coordinateTwo}px`;
        dragHandle.style.left = `${dragHandle.offsetLeft - coordinateOne}px`;
    };

    const dragDown = (event) => {
        event.preventDefault();
        coordinateThree = event.clientX;
        coordinateFour = event.clientY;
        document.onmouseup = stopDrag;
        document.onmousemove = elementDrag;
    };

    dragHandle.onmousedown = dragDown;
};

function MyComponent(){

    const dragRef = useRef();

    useEffect(() => {
        dragComponent(dragRef);
    }, []);

    return (
        <div draggable ref={dragRef}>
            <h1> I am draggable..drag me around</h1>
        </div>
    )
}

Answer 2

Did you try this:

  setDiffX(event.clientX - event.currentTarget.getBoundingClientRect().left);
        setDiffY(event.clientY - event.currentTarget.getBoundingClientRect().top);
        dragElementRef.current = elementSelected;
        setSelectedElement(elementSelected);
      
};

let dragElementRef = useRef(selectedElement);
....
....
     const handleDragEnd = (event) => {
//setTimeout(() => {
        console.log("drag end");
    
        let newElement = dragElementRef.current;
    
        console.log("new element is", newElement);
    
        newElement.style.top = event.clientY - diffY + "px";
        newElement.style.left = event.clientX - diffX + "px";
    
        document.getElementById("MidArea").appendChild(newElement);

//},500);

}

What I think is happening is your handleDragEnd() is being called before the next render cycle with updated value of state exists. Try adding a setTimeout to add some delay.