React DnD drag item is not updating with useState

Question

I use react-dnd together with a react maui tree. My goal is to drag multiple items at once.

My approach is to store all the selected nodes from the tree in useState as an array of ids(strings). On Click on a node the state is updated and I can successfully select multiple nodes.

The problems begin on drag. The item is not updated.

// returns the state
// initially e.g. ["4372"] later it should return the correct result
const getState = () => {
    return selectedTreeNodes
  }  

const [, drag] = useDrag(() => ({
    type: "el",
    item: getState(),
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult<DropResult>();
      if (item && dropResult) {
        alert(`You dropped ${item} ${selectedTreeNodes} into ${dropResult}!`);
      }
      console.log("DROPPED", item, "SELECTEDFIELDS", getState()); // all these are only logging the old state
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      handlerId: monitor.getHandlerId(),
    }),
  }));

I tried different approaches. The selectedTreeNodes are the ids. They are passed down from the parent component and in there they are the state. When I click on the parent node, the tree opens, and the item gets the id from the first selected parent node.

After changing the selection and starting the drag, the item doesn´t get updated anymore and hence I don´t get the updated ids but only the first one. The state itself updates correctly.

Any suggestions?

Answer 1

As stated in the comment, adding the selectedTreeNodes from the useState into the dependency array of the useDrag will do the magic.

Below the code (bit shorter than in the question) for people who might have the same problem:

  const [, drag] = useDrag(
    () => ({
      type: "el",
      item: selectedTreeNodes,
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
        handlerId: monitor.getHandlerId(),
      }),
    }),
    [selectedTreeNodes] // DEPENDENCY ARRAY HERE
  );