2

我正在使用这个很棒的 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”更新项目后我应该如何清理？

4

0 回答 0