React Beautiful DND无法找到draggableId

Question

我有一个简单的容器，其中包含一些卡片和该容器上方的两个插槽（小容器）。

我从纸牌容器中拖动到第一个插槽，它工作正常。我拖到第二个插槽，它也可以正常工作。当我从第一个插槽拖到第二个插槽时，它可以正常工作，但是当我尝试从第二个插槽拖回到第一个插槽时，reaction dnd说“无法找到draggableId-[卡片的ID]。如果我颠倒顺序（第一次从第二个拖动到第一个可以正常工作，然后如果我尝试从第二个拖动到第二个将不起作用）

这是我的代码。

const draggableContainer = () => {
    // the onDrag end Function
    const onDragEnd = result => {
        const {
            destination,
            source,
            draggableId
        } = result;
        if (!destination) {
            return;
        }
        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }

        const sourceCard = state.slots[source.droppableId];
        const newCard = state.slots[destination.droppableId];
        const newSlots = {
            ...state.slots,
            [source.droppableId]: {
                ...sourceCard,
                cardId: newCard.cardId
            },
            [destination.droppableId]: {
                ...newCard,
                cardId: sourceCard.cardId
            }
        };
        setState({
            cards: state.cards,
            slots: newSlots
        });
    }

    return ( <
        div className = {
            Style.cardContainer
        } > {
            allSlots &&
            allSlots.map((slot, index) => {
                const currentSlot = state.slots[slot];
                const {
                    cardId
                } = currentSlot;
                const chosenCard = cardToRender(cardId);
                return ( <
                    CardSlot slot = {
                        currentSlot
                    }
                    cardId = {
                        cardId
                    } > {
                        chosenCard && ( <
                            Draggable draggableId = {
                                cardId.toString()
                            }
                            index = {
                                index
                            }
                            {*/ Keeping this makes it work fine. Removing it causes the issue*/}
                            key = {
                                cardId
                            } >
                            {
                                (provided, snapshot) => ( <
                                    Box {
                                        ...provided.draggableProps
                                    } {
                                        ...provided.dragHandleProps
                                    }
                                    ref = {
                                        provided.innerRef
                                    }
                                    isDragging = {
                                        snapshot.isDragging
                                    } >
                                    <
                                    MotivatorCard title = {
                                        chosenCard.name
                                    }
                                    src = {
                                        chosenCard.imgs.desktop
                                    }
                                    width = {
                                        100
                                    }
                                    height = {
                                        100
                                    }
                                    /> <
                                    /Box>
                                )
                            } <
                            /Draggable>
                        )
                    } {
                        !chosenCard && ( <
                            StyledPlaceholder hasDragStarted = {
                                hasDragStarted
                            } > {
                                index + 1
                            } <
                            /StyledPlaceholder>
                        )
                    } <
                    /CardSlot>
                );
            })
        } <
        /div>
    )
}

CardSlot组件是可拖动的环绕卡片的水滴。这是它的代码：

export default ({ children, slot }) => {
    return (
        <Droppable droppableId={slot.id}>
            {(provided, snapshot) => (
                <StyledBox
                    className={`slot ${Style.cardWrapper}`}
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                    isDraggingOver={snapshot.isDraggingOver}
                >
                    {children}
                    {provided.placeholder}
                </StyledBox>
            )}
        </Droppable>
    );
};

问题是，如果我将key道具保留在Draggable本身上，即key = {cardId}则可以正常工作而没有任何问题。如果我将其删除，仅将key道具保留在CardSlot上，则会出现我上面提到的错误（无法找到draggableId）

任何人都可以解释为什么当我将键道具添加到Draggable组件中时，尽管它甚至不需要键吗？