【问题标题】：Unable to find draggable with id x - reactjs - react-beautiful-dnd无法找到 id x 的可拖动对象 - reactjs - react-beautiful-dnd
【发布时间】：2022-09-24 21:14:42
【问题描述】：

在我的 reactjs 页面上遇到 react-beautiful-dnd 的这个问题。

我从here 获得了我的代码，并对每个\"dragable\"/\"row\" 的内容进行了一些细微的更改

问题

更新：当我尝试拖动行时会发生此问题

数据

questions 等于

[
    {
      \"id\": 499,
      \"type\": \"text\",
      \"text\": \"T1\",
    },
    {
      \"id\": 500,
      \"type\": \"text\",
      \"text\": \"How are you doing?\",
    }
  ]

用户界面

代码

<TableContainer component={Paper}>
    <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">
        <TableHead>
        <TableRow>
            <TableCell align=\"left\"><strong>Title</strong></TableCell>
            <TableCell align=\"left\"><strong>Question Type</strong></TableCell>
            <TableCell align=\"left\"><strong>Recommend Answer Duration</strong></TableCell>
            <TableCell align=\"left\"><strong>Actions</strong></TableCell>
        </TableRow>
        </TableHead>
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId=\"droppable\">
            {(provided, snapshot) => (
                <tbody
                {...provided.droppableProps}
                ref={provided.innerRef}
                >
                <TableRow>
                    <TableCell component=\"th\" scope=\"row\">
                        <button className=\"questions-add-question-button\">+ Add Question</button>
                    </TableCell>
                    <TableCell align=\"left\">-</TableCell>
                    <TableCell align=\"left\">-</TableCell>
                    <TableCell align=\"left\"></TableCell>
                </TableRow>
                {questions.map((question:any, index) => (
                    <Draggable key={question.id.toString()} draggableId={question.id.toString()} index={index}>
                    {(provided, snapshot) => (
                        <TableRow
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}>
                            <TableCell component=\"th\" scope=\"row\">
                                {question.text}
                            </TableCell>
                            <TableCell align=\"left\">{question.type}</TableCell>
                            <TableCell align=\"left\">{question.recommend_answer_duration} Second(s)</TableCell>
                            <TableCell align=\"left\">                                        
                                <DropDown
                                    text=\"Actions\"
                                    buttons={
                                        <>
                                            <button>Delete</button>
                                        </>
                                    }
                                />
                            </TableCell>
                        </TableRow>
                    )}
                    </Draggable>
                ))}
                {provided.placeholder}
                </tbody>
            )}
            </Droppable>
        </DragDropContext>
    </Table>
</TableContainer>

标签： javascript reactjs typescript drag-and-drop

【解决方案1】：

解决方案/修复

我需要做的就是更改以下内容

将 droppable id 更改为更独特的东西 <Droppable droppableId="question-drag-and-drop">
将可拖动的 id 设置为更独特的东西 <Draggable key={`drag-id-${question.id.toString()}`} draggableId={`drag-id-${question.id.toString()}`} index={index}>
我还必须删除 React 的 StrictMode

【讨论】：