javascript - Kan inte hitta draggable med id: b7zc6

Hej, jag är ny på React och fastnat med ett problem med react-beautiful-dnd. Jag verkar ha konfigurerat enligt dokumentationen men står fortfarande inför detta konstiga problem relaterat till draggable id.

1. gjorde draggableid som sträng
2. angivet index som nummer
3. tilldelad innerref korrekt

Men problemet kvarstår fortfarande. Behöver lite expert hjälp inom detta område.

CodeSandBox-länk: Länk till React Beautiful DnD Codesandbox problemkod

Lägger även till koden för en snabb översikt:

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

Svar #1

Vid första anblicken är din kod korrekt. Problemet du stötte på handlar om att uppgradera till React v18. Som en tillfällig lösning kan jag råda dig att ta bort <StrictMode>-omslag och din app kommer att fungera.

Du kan hitta mer information om detta problem här: https://github.com/atlassian/react-beautiful-dnd/issues/2350

UPPDATERING :

Nedgradering till React v17 kan också hjälpa: https://github.com/atlassian/react-beautiful-dnd/issues/2407

UPPDATERING 2:

Jag har inte testat det själv men det verkar som att detta kan vara en lösning för att använda React v18 och inte ta bort <StrictMode>:https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1167427762