Моя простая реакция не работает - перетаскивание элемента приводит к исчезновению всего списка

Question

Я пытаюсь заставить этот код реагировать-работать с помощью библиотеки реагировать-на-прекрасную-библиотеку.

Я не уверен, но по каким-то причинам мои 2 списка исчезают, как только вы начинаете перетаскивать элемент.

https://codesandbox.io/s/jvq5815nvy

return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        {board.lists.map((list, index) => (
          <Droppable droppableId={list.name}>
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
              >
                {list.cards.map((card, index) => (
                  <Draggable key={card.id} draggable={card.id} index={index}>
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      >
                        {card.title}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        ))}
      </DragDropContext>
    );

Похоже, что нажатие и перетаскивание элемента портят, хотя я, возможно, был ключевым значением элемента, но я не вижу, кто ячто-то не так.

Разработчики, создавшие библиотеку, создали образец песочницы с рабочим кодом, который я пытался имитировать: я просто изменил пример песочницы для библиотеки

https://codesandbox.io/s/ql08j35j3q

Кто-нибудь может увидеть, что я делаю неправильно?

Answer 1

Я думаю, что ваша проблема из-за маленькой ошибки. В элементе Draggable вы устанавливаете draggable = {card.id}

<Draggable key={card.id} draggable={card.id} index={index}>
      ...
</Draggable> 

На самом деле это должен быть draggableId = {card.id}.