找不到 ID 为 x 的可拖动对象 - reactjs - react-beautiful-dnd

Question

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

我从这里得到了我的代码，对每个"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>

Answer 1

解决方案/修复

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

1. 将 droppable id 更改为更独特的<Droppable droppableId="question-drag-and-drop">

2. 将可拖动 id 设置为更独特的<Draggable key={`drag-id-${question.id.toString()}`} draggableId={`drag-id-${question.id.toString()}`} index={index}>

3. 我还必须删除 React 的 StrictMode