移除后如何清理可拖动的“ react-beautiful-dnd”？

Question

我正在使用这个很棒的react-beautiful-dnd库来让用户通过“拖放”来重新排序项目列表。它工作正常。我遇到的唯一问题是关于用户何时删除列表中的一项。似乎“ Draggable”组件在卸载后不会自行清理：

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”更新项目后，应该如何清理？