reactjs - 删除后如何清理“react-beautiful-dnd”可拖动?
问题描述
我正在使用这个很棒的 react-beautiful-dnd库让用户通过“拖放”重新排序项目列表。它工作得很好。我遇到的唯一问题是用户何时删除列表中的一项。似乎“可拖动”组件在卸载后不会自行清理:
const [items, setItems] = useState(initialItems);
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
>
{items.map((item, index) => {
return (
<Draggable
key={item.id}
draggableId={item.id.toString()}
index={index}
>
{(provided) => (
<div
{...provided.dragHandleProps}
{...provided.draggableProps}
ref={provided.innerRef}
>
<DraggableItem
item={item}
setItems={setItems}
/>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
如您所见,“setItems”被传递给“DraggableItem”组件,以便它可以在删除项目后更新状态。
它正确更新了状态,一切都很好,但我在浏览器控制台上收到了这个“警告”:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
通过调用“setItems”更新项目后我应该如何清理?
解决方案
推荐阅读
- kotlin - 从反应流处理中删除变量突变
- typeclass - 为什么 'neutral' 没有在 List monoid 中标准化为 '[]'?
- reactjs - React + MaterializeCSS + 动态渲染下拉菜单(故障位置)
- ios - 设置后关闭 ShortcutViewController
- firebase - 在firebase中禁用长度密码
- java - Spring:注入任何替代方案
- python - Neo4j 驱动程序在执行查询时关闭连接
- vim - 维姆。如何强制在新标签页中打开文件?
- android - 无法解决 R aapt.exe 以非零退出值 1 和许多其他此类错误完成
- spring - 带有来自本机查询的参数的 Spring 实体动态计算字段