我的简单 react-dnd 不起作用 - 拖动一个项目会导致整个列表消失答案

【问题标题】：My simple react-dnd is not working - dragging an item causes the entire list to disappear我的简单 react-dnd 不起作用 - 拖动一个项目会导致整个列表消失
【发布时间】：2018-10-18 02:53:22
【问题描述】：

我正在尝试使用 react-beautiful-dnd 库让这个 react-dnd 代码工作。

我不确定，但由于某种原因，当您开始拖动项目时，我的 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

谁能看出我做错了什么？

【问题讨论】：

我想问题出在 Draggable 上，因为您通过 .map 进行渲染，它渲染了所有可拖动的项目，如果您在这种情况下查看此视频一次会更好egghead.io/lessons/…
@Jayavel 我不确定这与这个示例有什么不同，其中每个项目都可以通过 .map 拖动 codesandbox.io/s/ql08j35j3q

标签： reactjs react-dnd

【解决方案1】：

我认为你的问题是因为一个小错误。在 Draggable 元素中，你设置 draggable = {card.id}

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

其实应该是draggableId = {card.id}。

【讨论】：