React Beautiful DND Invariant 在可拖动和可放置的 id 上失败

Question

试图找出为什么我不能拖放我的项目（我得到了列表元素的手，但无法拾取它们）。 我遵循了 T 的教程，但我不确定它为什么会失败。 我现在不关心列表顺序或越界拖动，只是能够拖动。

我收到以下错误：

遇到设置问题。 > 不变失败：Draggable 需要一个 draggableId

遇到设置问题。> 不变量失败：Droppable 需要一个 droppableId 道具

但是，我相信我的元素上有所有必要的 ID。 这是我的代码（请欣赏 sheRa 参考资料）

import React from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const sheRaCharacters = [
  {
    id: "Adora",
    name: "Adora",
    color: "#FFD700",
  },
  {
    id: "Catra",
    name: "Catra",
    color: "#ff0000",
  },
  {
    id: "Entrapta",
    name: "Entrapta",
    color: "purple",
  },
  {
    id: "Mermista",
    name: "Mermista",
    color: "#0000ff",
  },
];

class DragDropTest extends React.Component {

  render() {
    const listStyle = {
      backgroundColor: "pink",
      padding: "10px",
      margin: "8px",
      borderRadius: "8px",
    };

    const characterList = sheRaCharacters.map(({ id, name, color }, index) => {
      return (
        <Draggable key={id} draggableID={id} index={index}>
          {(provided) => (
            <li
              ref={provided.innerRef}
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              style={listStyle}
            >
              <p style={{ color: color }}>{name}</p>
            </li>
          )}
        </Draggable>
      );
    });

    return (
      <div>
        <DragDropContext>
          <Droppable droppableID="characters">
            {(provided) => (
              <ul ref={provided.innerRef} {...provided.droppableProps}>
                {characterList}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </div>
    );
  }
}

export default DragDropTest;

所以可放置区域有一个字符串 ID，所有可拖动元素也有一个字符串 ID。 我错过了什么？

Answer 1

JS 区分大小写，所以你必须写 'draggableId' 而不是 'draggableID'