使用 useState 的反应拖放正在覆盖以前的状态

Question

我正在为我的产品开发各种页面构建器，我正在使用 react-dnd 来完成我需要的工作。到目前为止，我已经掌握了基本的拖放功能，并且能够将单个项目添加到我的页面，但是我遇到了障碍。

当我将一个新项目拖到我的拖放区时，预期的行为是它会将一个新项目添加到我已存储在状态嵌套对象中的现有数组中，但是当我拖动 -并将另一个项目放到它上面它会覆盖前一个项目，只允许我在我的页面中有一个项目。我整天都在用头撞墙。以下是我的代码；如果您需要更多，请发表评论，我会尽力澄清。

所以，这是我的 useState。我这里还有一些其他物品，但它们并不重要。重要的是 content 数组：

const [lessonContent, setLessonContent] = useState({
    title: '',
    courseType: '',
    content: [],
});

我将元素添加到 lessonContent.content 的函数传递给 useDrop 挂钩：

const handleAddLessonElement = (element: Record<string, unknown>) => {
    setLessonContent({
      ...lessonContent,
      content: [...lessonContent.content, element],
    });
};

const [{ isOver }, drop] = useDrop(() => ({
    accept: 'card',
    drop: (item) => handleAddLessonElement(item),
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
    }),
}));

useDrag 钩子：

const [{ isDragging }, drag] = useDrag(() => ({
    type: 'card',
    item: {
      type: element.value,
      value: '',
      config: { label: element.label },
    },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
}));

此外，我将 <DNDProvider> 与 HTML5Backend 一起使用，并且我已经将所有使用 react-dnd 工具的组件包装了起来。正如我所说，基础知识是有效的，但我似乎在添加状态时搞砸了一些东西。在我的一生中，我就是找不到它是什么。

提前致谢！

Answer 1

终于弄明白了，原来这是我尝试过但没有正确实施的解决方案。

我的问题是我没有在数组更新时跟踪它，所以我一直在覆盖我刚刚完成的内容。因此，只需更新我的 handleAddLessonElement 函数以在向数组添加元素之前跟踪更新后的状态。

const handleAddLessonElement = (element: Record<string, unknown>) => {
   setLessonContent((previousState: Record<string, any>) => ({
     ...previousState,
     content: [...previousState.content, element],
   }));
};

如您所见，我添加了 previousState，它将在我添加元素时跟踪新更新的状态，然后使用扩展运算符将这些新元素添加到复制的数组中。

使用 useState 的反应拖放正在覆盖以前的状态

React Drag-and-Drop with useState is overwriting previous state

drag-and-drop

reactjs

react-dnd

react-hooks

use-state