useSortable 与 dnd-kit 一起使用时出错

Question

我不知道为什么它给我一个错误，useSortable

import React, { useState } from "react";
import "./Home.css";
import Cards from "../../components/cards/Cards";
import { Container } from "./HomeStyles";
import {
  DndContext,
  closestCorners,
  MouseSensor,
  TouchSensor,
  useSensor,
  useSensors
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  rectSortingStrategy
} from "@dnd-kit/sortable";

const Home = () => {
  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));

  const [data, setData] = useState([
    {
      id: "1",
      text: "H",
    },
    {
      id: "2",
      text: "E",
    },
    {
      id: "3",
      text: "L",
    },
    {
      id: "4",
      text: "L",
    },
    {
      id: "5",
      text: "O",
    },
  ]);

  return (
    <Container>
    <DndContext
      autoScroll={false}
      sensors={sensors}
      collisionDetection={closestCorners}
      onDragEnd={handleDragEnd}
    >
      <SortableContext
        items={data.map((i) => i.name)}
        strategy={rectSortingStrategy}
      >
        <div
          style={{
            height: "100%",
            width: "100%",
            maxHeight: "30rem",
            maxWidth: "40rem",

            // remove these three lines for a horizontal example
            display: "flex",
            flexDirection: "column",
            flexWrap: "wrap"
          }}
        >
          {data.map((item) => (
            <Cards key={item.id} name={item.text} ids={item.id} />
          ))}
        </div>
      </SortableContext>
    </DndContext>
    </Container>
  );

  function handleDragEnd(event) {
    const { active, over } = event;

    if (active.id !== over.id) {
      setData((items) => {
        const oldIndex = items.findIndex((i) => i.name === active.id);
        const newIndex = items.findIndex((i) => i.name === over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }
  }
};

export default Home;

这是我的卡片组件

import React from "react";
import { Card } from "./CardsStyled";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

const cards = ({ ids, name }) => {
  const sortable = useSortable({id: ids})
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition
  } = sortable;

  const style = {
    transition,
    transform: CSS.Transform.toString(transform),
    border: "2px solid black",
    marginBottom: 5,
    marginTop: 5,
  };

  return (
    <div>
      <Card ref={setNodeRef} {...attributes} {...listeners} style={style}>
        <h1>{name}</h1>
      </Card>
    </div>
  );
};

export default cards;

这是我在浏览器中遇到的错误

我在文档中读到 useStortable 必须位于 SortableContext 内部，而我所做的是在同一个 Home 中使用 useSortable 并且没有给出错误......但我想知道它是如何真正使用的。

Answer 1

您已将所有内容写在错误消息中。

您正在导入带有大写字母的卡：

import Cards from "../../components/cards/Cards";

并且在组件中它有小写：

const cards = ({ ids, name }) => {

组件应以大写字母开头。

Answer 2

卡片组件应为大写字母 例如： 而不是

Answer 3

只需大写您的卡组件名称。

const cards = ({ ids, name }) => {

应该是

const Cards = ({ ids, name }) => {

在react中，所有组件名称都应以大写字母开头。因此，要定义卡片组件，您应该将其命名为 Cards 而不是 cards