Tratando de averiguar por qué no puedo arrastrar y soltar mis elementos (obtengo una mano sobre los elementos de la lista, pero no puedo recogerlos). Seguí un tutorial al pie de la letra y no estoy seguro de por qué está fallando. No me preocupa el orden de la lista o el arrastre fuera de los límites en este momento, solo poder arrastrar.

Recibo los siguientes errores:

Se encontró un problema de configuración. > Invariante fallido: Draggable requiere un draggableId

Se encontró un problema de configuración.> Invariante falló: un Droppable requiere un prop droppableId

Sin embargo, creo que tengo todas las identificaciones necesarias en mis elementos. Aquí está mi código (por favor, disfrute de las referencias de sheRa)

 import React from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; const sheRaCharacters = [ { id: "Adora", name: "Adora", color: "#FFD700", }, { id: "Catra", name: "Catra", color: "#ff0000", }, { id: "Entrapta", name: "Entrapta", color: "purple", }, { id: "Mermista", name: "Mermista", color: "#0000ff", }, ]; class DragDropTest extends React.Component { render() { const listStyle = { backgroundColor: "pink", padding: "10px", margin: "8px", borderRadius: "8px", }; const characterList = sheRaCharacters.map(({ id, name, color }, index) => { return ( <Draggable key={id} draggableID={id} index={index}> {(provided) => ( <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} style={listStyle} > <p style={{ color: color }}>{name}</p> </li> )} </Draggable> ); }); return ( <div> <DragDropContext> <Droppable droppableID="characters"> {(provided) => ( <ul ref={provided.innerRef} {...provided.droppableProps}> {characterList} {provided.placeholder} </ul> )} </Droppable> </DragDropContext> </div> ); } } export default DragDropTest;

Entonces, el área desplegable tiene una ID de cadena y todos los elementos que se pueden arrastrar también tienen ID de cadena. ¿Qué me perdí?