React DnD 拖动项目未使用 useState 更新

Question

我将 react-dnd 与 react maui 树一起使用。我的目标是一次拖动多个项目。

我的方法是将树中的所有 selected 节点存储在 useState 中作为一个 ids（字符串）数组。单击节点时，状态会更新，我可以成功 select 多个节点。

问题始于拖动。该项目未更新。

// 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(),
    }),
  }));

我尝试了不同的方法。 selectedTreeNodes 是 ID。它们是从父组件传递下来的，它们就是状态。当我单击父节点时，树打开，item 从第一个 selected 父节点获取 id。

更改 selection 并开始拖动后，item 不再更新，因此我没有得到更新的 ID，只有第一。状态本身正确更新。

有什么建议吗？

Answer 1

尝试将 useMemo 改为 useState 并在 useMemo 中使用依赖项

useMemo(() => {
  // code
}, [dependency])

并且在更改依赖项时你将触发整个备忘录同样是 useCallback 但 useCallback return 函数和 useMemo return 变量

Answer 2

如评论中所述，将 useState 中的 selectedTreeNodes 添加到 useDrag[ 的 dependency 数组 中=18=] 会变魔术的。

下面的代码（比问题中的短一点）可能有同样问题的人：

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

React DnD 拖动项目未使用 useState 更新

React DnD drag item is not updating with useState

typescript

reactjs

react-dnd