React 中的 AddEventListener 不断返回每个事件而不是当前事件

Question

大家好，我对 React 和 Kendo React 很陌生。我正在尝试使用本教程从 kendo React 网格中拖放来使用 kendo React 调度程序 https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-scheduler-拖放/，但由于某种原因，在处理 Drop 到调度程序时，侦听器将返回每个先前的事件，有时还会返回未定义的事件。我尝试在每次触发 drop 时清除 addlistener 事件，但仍然无法弄清楚这一点。任何导入都会非常有帮助！

import * as React from "react";
import { guid } from "@progress/kendo-react-common";
import { timezoneNames } from "@progress/kendo-date-math";

import {
  Scheduler,
  TimelineView,
  DayView,
  WeekView,
  MonthView,
  AgendaView,
} from "@progress/kendo-react-scheduler";
import "@progress/kendo-date-math/tz/Etc/UTC";
import "@progress/kendo-date-math/tz/Europe/Sofia";
import "@progress/kendo-date-math/tz/Europe/Madrid";
import "@progress/kendo-date-math/tz/Asia/Dubai";
import "@progress/kendo-date-math/tz/Asia/Tokyo";
import "@progress/kendo-date-math/tz/America/New_York";
import "@progress/kendo-date-math/tz/America/Los_Angeles";
import { Grid, GridColumn } from "@progress/kendo-react-grid";
import gridData from "../StaticData/data.js";
import {
  sampleDataWithCustomSchema,
  displayDate,
  customModelFields,
} from "../StaticData/events-utc";

const Schedule = () => {
  const timezones = React.useMemo(() => timezoneNames(), []);
  const locales = [
    {
      language: "en-US",
      locale: "en",
    },
    {
      language: "es-ES",
      locale: "es",
    },
  ];
  const [view, setView] = React.useState("day");
  const [date, setDate] = React.useState(displayDate);
  const [locale, setLocale] = React.useState(locales[0]);
  const [timezone, setTimezone] = React.useState("Etc/UTC");
  const [orientation, setOrientation] = React.useState("horizontal");
  const [data, setData] = React.useState(sampleDataWithCustomSchema);
  const [Griddata, setGridData] = React.useState(gridData);
  const handleViewChange = React.useCallback(
    (event) => {
      setView(event.value);
    },
    [setView]
  );
  const handleDateChange = React.useCallback(
    (event) => {
      setDate(event.value);
    },
    [setDate]
  );
  const handleLocaleChange = React.useCallback(
    (event) => {
      setLocale(event.target.value);
    },
    [setLocale]
  );
  const handleTimezoneChange = React.useCallback(
    (event) => {
      setTimezone(event.target.value);
    },
    [setTimezone]
  );

  const handleDataChange = React.useCallback(
    
    ({ created, updated, deleted }) => {
      setData((old) =>
        old
          .filter(
            (item) =>
              deleted.find((current) => current.TaskID === item.TaskID) ===
              undefined
          )
          .map(
            (item) =>
              updated.find((current) => current.TaskID === item.TaskID) || item
          )
          .concat(
            created.map((item) =>
              Object.assign({}, item, {
                TaskID: guid(),
              })
            )
          )
      );
    },
    [setData]

  );

  function Exists(taskId) {
    return data.some(function(el) {
      return el.TaskID === taskId;
    }); 
  }

  const handleDropItem = (e) => {


console.log(dragItem)
//  if(Exists(dragItem.taskID)==false ){

 
  
//     let start = e.target.getAttribute("data-slot-start");
//     let end = e.target.getAttribute("data-slot-end");
//     let room = e.target.getAttribute("data-slot-group");
//     let startDate = new Date(parseInt(start));
//     let endDate = new Date(parseInt(end));
//     let newEvent = {

    
//       TaskID: dragItem.taskID,
//       End: endDate,
//       PersonIDs: 1,
//       RoomID: 2,
//       Start: startDate,
//       Title: dragItem.title ,
//       isAllDay: false


//     }
  
//     setData(oldData=>[newEvent, ...oldData])
//     setGridData(Griddata.filter(item=>item.taskID!== dragItem.taskID))




     // }
  };
  React.useEffect(() => {
    let schedulerElement = MyScheduler.current.element;
    schedulerElement.addEventListener("drop", handleDropItem);
    schedulerElement.addEventListener("dragover", (e) => e.preventDefault());
  });

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

  
  const MyScheduler = React.createRef();
  const [dragItem, setDragItem] = React.useState("");
  const GridRowRender = (tr, props) => {
    const trProps = {
      draggable: true,
      onDragStart: (e) => {
        console.log(e)
        setDragItem(props.dataItem);
      
      }
    };

  return React.cloneElement(tr, { ...trProps }, tr.props.children);
   
  };
  return (
    <div>
      

          <Scheduler
            data={data}
            onDataChange={handleDataChange}
            view={view}
            onViewChange={handleViewChange}
            date={date}
            onDateChange={handleDateChange}
            editable={true}
            timezone={timezone}
            modelFields={customModelFields}
            group={{
              resources: ["Rooms", "Persons"],
              orientation,
            }}
            resources={[
              {
                name: "Rooms",
                data: [
                  {
                    text: "Meeting Room 101",
                    value: 1,
                  },
                  {
                    text: "Meeting Room 201",
                    value: 2,
                    color: "#FF7272",
                  },
                ],
                field: "RoomID",
                valueField: "value",
                textField: "text",
                colorField: "color",
              },
              {
                name: "Persons",
                data: [
                  {
                    text: "Peter",
                    value: 1,
                    color: "#5392E4"
          
                  },
                  {
                    text: "Alex",
                    value: 2,
                    color: "#54677B",
         
                  },
                ],
                multiple:false,
                field: "PersonIDs",
                valueField: "value",
                textField: "text",
                colorField: "color"
            
              },
            ]}
            ref={MyScheduler}
          >
            <TimelineView />
            <DayView />
            <WeekView />
            <MonthView />
            <AgendaView />
          </Scheduler>
          <hr />
      <Grid data={Griddata} rowRender={GridRowRender}>
        <GridColumn field="taskID" />
        <GridColumn field="title" />
      </Grid>
    </div>
  );
};

export default Schedule

我已经厌倦了清除拖动项的使用状态，清除侦听器，但没有任何改变。

Answer 1

我在每个渲染上添加一个新的事件侦听器。非常感谢康拉德！

Answer 2

你做了什么改变来解决这个问题？