Reactjs 应找到有效的目标react dnd

我在react dnd中遇到此错误。奇怪的是，这取决于我为react组件指定的键。如果我指定index，函数的一部分会触发此错误，而当我指定item.id时，另一部分不会触发。这没有道理。请帮忙

当我指定要索引的键时，当论坛没有父节点时会触发错误。但是，当我将密钥指定为forum.\u id时，当forum具有父级时会触发错误。我不知道该怎么办，请帮忙：）

请访问此沙盒以复制：

复制： 将项目1ba拖动到项目1的顶部，然后沿路径拖动项目1ba

Forum.jsx

const Forum = ({ forum, forums, setForums, move, find }) => {
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: "forum",
    hover: throttle((item, monitor) => {
      if (item._id === forum._id) {
        return;
      }
      if (!monitor.isOver({ shallow: true })) {
        return;
      }

      if (!canDrop) return;

      move(item, forum, forum.parent);

      item = forum;
    }, 200),
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop(),
    }),
  });

  const [, drag, preview] = useDrag({
    item: {
      _id: forum._id,
      title: forum.title,
      type: "forum",
      children: forum.children,
      parent: forum.parent,
    },
    isDragging(props, monitor) {
      return props._id == monitor.getItem()._id;
    },
  });

  const getChildren = async (forumId) => {
    const _forums = await ForumService.getChildren(forumId, forums);
    setForums(_forums);
  };

  return (
    <Wrapper ref={drop}>
      <ForumContainer ref={drag}>
        {!!forum.childrenIds?.length && (
          <div>
            {!forum.isOpen ? (
              <ForumChevron
                className="fas fa-chevron-down"
                onClick={() => getChildren(forum._id)}
              ></ForumChevron>
            ) : (
              <ForumChevron
                className="fas fa-chevron-up"
                onClick={() =>
                  setForums(ForumService.resetChildren(forum._id, forums))
                }
              ></ForumChevron>
            )}
          </div>
        )}
        <ForumTitle>{forum.title}</ForumTitle>
      </ForumContainer>

      {forum.children && !!forum.children.length && (
        <ForumChildrenWrapper>
          {forum.children.map((child, index) => (
            <Forum
              forum={child}
              setForums={setForums}
              forums={forums}
              key={index}
              move={move}
              find={find}
            />
          ))}
        </ForumChildrenWrapper>
      )}
    </Wrapper>
  );
};

export default Forum;

---

如果删除collect函数中的monitor.canDrop（），则它可以工作。不确定，但这是一种方法。

如果删除collect函数中的monitor.canDrop（），则它可以工作。不确定，但这是一种方法。

尝试向悬停处理程序添加去盎司（使用拖尾选项）。组件更新过快，在DnD赶上之前设置了状态，并且在用户删除该项时目标ID已更改

---

另外-不要使用索引作为键，因为它每次都会更改。

尝试向悬停处理程序添加反Bounce（带尾随选项）。组件更新过快，在DnD赶上之前设置了状态，并且在用户删除该项时目标ID已更改

---

另外-不要使用索引作为键，因为它会每次更改。

有人吗？请帮帮我，我没有主意了！什么是“这个错误”？你提到过几次，但我在问题的任何地方都看不到错误信息。标题上写着“请回答？”？我发布了一个沙盒更新，用于复制错误，请参见描述？我不知道怎么做，有人吗？请帮帮我，我没有主意了！什么是“这个错误”？你提到过几次，但我在问题的任何地方都看不到错误信息。标题上写着“请回答？”？我发布了一个沙盒更新，用于复制错误，请参见描述？我不知道怎么做

    if (!item.parent) {
      console.log("here 1");
      const dest = findItem(afterItem._id, _forums);
      if (!dest.children) dest.children = [];

      foundItem.parent = afterItem._id;
      const idx = _forums.findIndex((f) => f._id === item._id);
      _forums.splice(idx, 1);

      if (dest.parent === foundItem._id) {
        dest.parent = "";
        if (foundItem.children.length) {
// When key is item.id, error shows up here
          console.log("parent & has children");
          for (let child of [...foundItem.children]) {
            if (child._id === dest._id) {
              child.children.splice(0, 0, {
                ...foundItem,
                children: [],
                childrenIds: [],
              });
            }
            _forums.push(child);


          }
        } else {
          console.log("no children");
          dest.children.unshift({
            ...foundItem,
            children: [],
            childrenIds: [],
          });
        }
      } else {
// When key is index, error shows up here


        console.log("no parent");
        console.log(dest);
        dest.parent = "";
        dest.children.splice(0, 0, {
          ...foundItem,
          children: [],
          childrenIds: [],
        });
      }
    }