javascript - 无法找到 ID 为 : b7zc6 的可拖动对象

Question

嗨，我是 React 的新手，遇到了 react-beautiful-dnd 问题。我似乎已经按照文档进行了配置，但仍然面临与可拖动 ID 相关的奇怪问题。

1. 将 draggableid 设为字符串
2. 以数字形式提供索引
3. 正确分配 innerref

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

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;
}

Answer 1

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

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

更新:

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

更新 2:

我还没有亲自测试过，但似乎这可能是使用 React v18 并且不删除 <StrictMode> 的解决方法: https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1167427762