Как очистить "реакции-красивые-dnd" Draggable после удаления? - PullRequest
Новая
       17

Как очистить "реакции-красивые-dnd" Draggable после удаления?

0 голосов
/ 09 апреля 2020

Я использую эту удивительную библиотеку реагировать-красиво-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», чтобы он мог обновить состояние после удаления item.

Он корректно обновляет состояние, и все в порядке, но я получаю «Предупреждение» на консоли моего браузера: 

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 "?

...