javascript - ไม่สามารถหาส่วนที่ลากได้โดยใช้ id: b7zc6

สวัสดี ฉันเพิ่งเริ่มใช้ React และติดปัญหาเกี่ยวกับ react-beautiful-dnd ดูเหมือนว่าฉันได้ตั้งค่าตามเอกสารแล้ว แต่ยังเจอปัญหาแปลก ๆ เกี่ยวกับ draggable id อยู่

1. ทำ draggableid เป็นสตริง
2. ระบุดัชนีเป็นตัวเลข
3. มอบหมาย innerref อย่างถูกต้อง

แต่ปัญหายังคงอยู่ ต้องการความช่วยเหลือจากผู้เชี่ยวชาญในด้านนี้

ลิงก์ CodeSandBox: ลิงก์ไปยังโค้ดปัญหา react beautiful dnd ใน codesandbox

นอกจากนี้ยังเพิ่มรหัสสำหรับการดูอย่างรวดเร็วอีกด้วย:

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

คำตอบ #1

จากมุมมองแรก โค้ดของคุณถูกต้อง ปัญหาที่คุณเจอเกี่ยวกับการอัปเกรด React v18 เป็นทางแก้ชั่วคราว ฉันสามารถแนะนำให้คุณลบ wrapper <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