我无法更新状态，因为React中的DND套件

Question

我在使用deleteProyect函数时遇到问题，当客户端单击按钮时，组件不会消除数组中的对象，除非您尽可能快地单击，所以这可能与useEfect IDK有关，我希望您能帮助我，谢谢！

ProyectContext.jsx

import React, { useState, createContext, useEffect } from "react";
import { proyects as data } from "../data/proyects";

export const ProyectContext = createContext({});
export function ProyectContextProvider(props) {
  const [proyects, setProyects] = useState([]);

  useEffect(() => {
    setProyects(data);
  }, []);

  function createProyect(title, platform) {
    setProyects((prevProyects) => [
      ...prevProyects,
      {
        id: prevProyects.length,
        title: title,
        platform: platform,
        img: "https://www.lacorformacion.com/wp-content/uploads/curso-por-defecto.jpg",
      },
    ]);
  }

  
  function deleteProyect(proyectID) {
    setProyects((prevProyects) => {
      const updatedProyects = prevProyects.filter((proyect) => proyect.id !== proyectID);
      return updatedProyects;
    });
  }


  return (
    <ProyectContext.Provider
      value={{ proyects, setProyects, createProyect, deleteProyect }}
    >
      {props.children}
    </ProyectContext.Provider>
  );
}

ProyectList.jsx

import React, { useContext, useEffect } from "react";
import { ProyectContext } from "../../context/ProyectContext";
import { DndContext, closestCenter } from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import ProyectCard from "./ProyectCard";

function ProyectList() {
  const { proyects, setProyects } = useContext(ProyectContext);

  function handleDragEnd(evt) {
    const { active, over } = evt;
    
    setProyects((proyects) => {
      const oldIndex = proyects.findIndex(
        (proyect) => proyect.id === active.id
      );
      const newIndex = proyects.findIndex((proyect) => proyect.id === over.id);

      return arrayMove(proyects, oldIndex, newIndex);
    });
  }
  return (
    <>
      <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
        <SortableContext
          strategy={verticalListSortingStrategy}
          items={proyects}
        >
          {proyects.map((proyect) => (
            <ProyectCard key={proyect.title} proyect={proyect} />
          ))}
        </SortableContext>
      </DndContext>
    </>
  );
}

export default ProyectList;

ProyectCard.jsx

import { useContext } from "react";
import { ProyectContext } from "../../context/ProyectContext";
import {
  Card,
  Image,
  Stack,
  CardBody,
  Button,
  Heading,
  Text,
} from "@chakra-ui/react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

function ProyectCard({ proyect }) {
  const { deleteProyect } = useContext(ProyectContext);

  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: proyect.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <Card
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      direction={{ base: "column", sm: "row" }}
      overflow="hidden"
      variant="outline"
      marginRight={{ base: 0, md: 200 }}
    >
      <Image
        paddingTop={5}
        paddingStart={5}
        objectFit="cover"
        maxH={{ base: "100%", sm: "120px" }}
        maxW={{ base: "100%", sm: "200px" }}
        src={proyect.img}
        alt={proyect.title}
      />

      <Stack>
        <CardBody>
          <Heading size="md">{proyect.title}</Heading>

          <Text py="2">{proyect.platform}</Text>
          <Button variant="solid" colorScheme="blue" marginEnd={4}>
            Planificar
          </Button>
          <Button colorScheme="red" onClick={() => deleteProyect(proyect.id)}>
            Eliminar
          </Button>
        </CardBody>
      </Stack>
    </Card>
  );
}

export default ProyectCard;

我尝试使用reducer来管理复杂的状态，但我无法解决问题

Answer 1

即使单击操作，您的拖动侦听器也会被激活，因此出现了问题。为了解决这个问题，您可以定义 DnD，仅当拖动导致至少 10 像素距离移动时才应监听拖动。

ProyectList 组件内部

const sensors = useSensors(
  useSensor(MouseSensor, {
    activationConstraint: {
      distance: 10,
    },
  }),
);
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>

useSensors、useSensor、MouseSensor 是从“@dnd-kit/core”导入的