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

Question

Hi Everyone I'm very new to React and Kendo React. I'm trying to use the kendo react scheduler with a drag and drop from a kendo react grid using this tutorial https://www.telerik.com/kendo-react-ui/components/knowledge-base/grid-scheduler-drag-and-drop/ but for some reason when handling the Drop to the scheduler the Listener is returning every pervious event and sometimes a undefined event. Ive tried to clear the addlistener event each time the drop is fired but still cant figure this out. Any import would be very helpful!

enter image description here

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

Ive tired to clear the usestate of the dragItem, clear the listeners but nothing changed.

Answer 1

I was adding a new event listener on every render. Thank you so much Konrad!