无法找到 ID 为 b7zc6 的可拖动对象答案

【问题标题】：Unable to find draggable with id: b7zc6无法找到 ID 为 b7zc6 的可拖动对象
【发布时间】：2022-07-04 20:40:29
【问题描述】：

您好，我是新来的反应者，并且遇到了 react-beautiful-dnd 问题。我似乎已经按照文档进行了配置，但仍然面临与可拖动 ID 相关的奇怪问题。

将 draggableid 设为字符串
以数字形式提供索引
正确分配内部引用

但问题仍然存在。需要这方面的专家帮助。

CodeSandBox 链接：Link to react beautiful dnd codesandbox issue code

同时添加代码以便快速浏览：

import "./styles.css";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { useState } from "react";

export default function App() {
  const [list, setList] = useState(generateData());

  const st = {
    width: "300px",
    cursor: "grab",
    display: "flex",
    gap: "10px",
    flexDirection: "column"
  };
  const onDragEnd = (result) => {
    if (result.destination) {
      alert("drag successfull");
    }
  };

  return (
    <div className="App">
      <h4>Test</h4>
      <div>
        <DragDropContext onDragEnd={onDragEnd}>
          <Droppable droppableId="droppable">
            {(provided) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={st}
                className="work-parent"
              >
                <WorkList list={list} />
              </div>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    </div>
  );
}

function WorkList({ list }) {
  return list.map((l, index) => <Work key={l.id} work={l} index={index} />);
}

function Work({ work, index }) {
  const st = {
    padding: "10px",
    width: "100%",
    color: "white",
    backgroundColor: "purple",
    width: "200px",
    height: "50px"
  };
  return (
    <Draggable draggableId={work.id} key={work.id} index={index}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={st}
        >
          {work.title}
        </div>
      )}
    </Draggable>
  );
}

function generateData() {
  const data = [];

  for (let i = 0; i < 10; i++) {
    data.push({
      title: "Work - " + i,
      id: makeid(5)
    });
  }

  return data;
}

function makeid(length) {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

【问题讨论】：

标签： javascript reactjs typescript react-beautiful-dnd

【解决方案1】：

乍一看，您的代码是正确的。您面临的问题是关于升级 React v18。作为临时解决方案，我可以建议您删除 <StrictMode> 包装器，您的应用程序将正常运行。

您可以在此处找到有关此问题的更多信息：https://github.com/atlassian/react-beautiful-dnd/issues/2350

更新：

降级到 React v17 也可能有帮助： https://github.com/atlassian/react-beautiful-dnd/issues/2407

【讨论】：

处理了我的案子。