重新渲染太多，没有按预期工作。 useEffect、useState、localStorage、syncfusion

Question

[Syncfusion React Schedule Component] 大家好，第一次发帖，心急如焚。接受了这份新工作，我被期望做一些我以前没有处理过的反应。这段代码有很多问题，所以我接受你们指出的任何问题。首先，我不能从事件中排除 title/subject 属性，因为它们将我的代码扔进了垃圾桶，我也遇到了 quickInfoTemplate 的问题（我想禁用它并使用 schedule 组件的 eventClick/cellClick 道具来触发 customTemplateEditor .我还想根据在项目上花费的时间来触发结束时间的自动更改，但是由于我在 at 使用道具，所以我不知道该怎么做（如果有人知道该怎么做，我也可以提供该组件的代码片段） ). 但事情实际上是 localEvents 被映射的 useEffect（我老板提供的代码片段，我从来没有处理过被触发一千次的 window.addEventListener），它触发了太多的重新渲染，我不知道是什么要做修复它，经过一些更改以尝试修复它现在应用程序停止以防止每次我尝试添加新事件时出现无限循环（不确定 eventChange 或 delete 因为我无法到达那里）。Syncfusio n 文档真的很差，或者我太新手了，不管怎样，任何一个灯都很棒

import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import {
  Agenda,
  Day,
  Inject,
  Month,
  ScheduleComponent,
  Week,
  WorkWeek,
} from "@syncfusion/ej2-react-schedule";
import React, { useEffect, useState } from "react";
import CustomEditorTemplate from "./EditorTemplate";
import "./MainContent.css";

export default function ScheduleCalendar() {
  // Ref
  let scheduleObj;
  const currentView = "Month";
  // State

  const [localData, setLocalData] = useState([]);
  const [requestData, setRequestData] = useState({});

  useEffect(() => {
    const localStorageData = localStorage.getItem("appointments")
      ? JSON.parse(localStorage.getItem("appointments"))
      : [];
    setLocalData(localStorageData);
  }, []);

  const onActionComplete = () => {
    localStorage.setItem("appointments", JSON.stringify(localData));
  };
  // ScheduleOPS
  const fieldsData = {
    id: "id",
    subject: { name: "subject" },
    startTime: { name: "startTime" },
    endTime: { name: "endTime" },
    hours: { name: "hours" },
    budgetHrs: { name: "budgetHrs" },
    description: { name: "description" },
    totalTime: { name: "totalTime" },
    project: { name: "project" },
    task: { name: "task" },
    workCode: { name: "workCode" },
    customer: { name: "customer" },
  };

  const onActionBegin = (args) => {
    /* console.log(args); */
    args.data && setRequestData(args.data);
  };
  /* console.log(requestData[0]); */
  const editorTemplate = (props) => {
    return props !== undefined ? <CustomEditorTemplate /> : <div></div>;
  };

  const handleOpenEditor = () => {
    const cellData = {
      startTime: new Date(),
    };
    scheduleObj.openEditor(cellData, "Add");
  };

  // EventHandles
  const onEventCreate = () => {
    if (requestData.length) {
      const validateData = localData.filter((item) => {
        return item.id === requestData[0].id;
      });
      /*       console.log(validateData); */
      if (validateData.length) {
        alert("This event already exists.");
      } else {
        const updatedData = [...localData, requestData[0]];
        /*         console.log(updatedData); */
        setLocalData(updatedData);
      }
    }
  };

  const onEventChange = () => {
    if (requestData.length) {
      const updatedData = localData.map((item) => {
        if (item.id !== requestData[0].id) {
          return item;
        } else {
          return requestData;
        }
      });
      console.log("updatedData", updatedData);
      if (localData === updatedData) {
        alert("No change detected.");
      } else {
        setLocalData(updatedData);
      }
    }
  };

  const onEventDelete = () => {
    if (requestData.length) {
      const updatedData = localData.filter((appointment) => {
        //console.log(requestData[0]);
        return appointment.id !== requestData[0].id;
      });
      setLocalData(updatedData);
    }
  };

  const localEvents = [
    { eventName: "eventCreate", eventHandler: onEventCreate() },
    { eventName: "eventChange", eventHandler: onEventChange() },
    { eventName: "eventDelete", eventHandler: onEventDelete() },
  ];

  useEffect(() => {
    localEvents.map((e) => {
      return window.addEventListener(e.eventName, e.eventHandler);
    });

    return () => {
      const removeListener = localEvents.map((e) => {
        return window.removeEventListener(e.eventName, e.eventHandler);
      });
      return removeListener;
    };
  }, []);

  const eventTemplate = (props) => {
    return <div className="template-wrap">{props.customer}</div>;
  };

  return (
    <ScheduleComponent
      ref={(t) => (scheduleObj = t)}
      currentView={currentView}
      eventSettings={{
        dataSource: localData,
        fields: fieldsData,
        template: eventTemplate.bind(this),
      }}
      editorTemplate={editorTemplate.bind(this)}
      actionBegin={onActionBegin}
      actionComplete={onActionComplete}
    >
      <div className="e-toolbar-items e-tbar-pos">
        <ButtonComponent
          iconCss="e-icons e-date-time"
          className="e-control e-btn"
          id="targetButton1"
          onClick={handleOpenEditor}
        />
      </div>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
}

我已经尝试添加 onActionComplete 以查看是否可以解决问题但没有任何效果。实际上，由于我放下的新逻辑，我在 localStorage 中拥有的所有先前数据都以某种方式被删除了。我真的在寻找任何意见/想法