fix: Endlosschleife in useAlarmStatus.ts behoben & Redux-Selektoren optimiert

- useMemo für Redux-Selektoren in Kue705FO.tsx hinzugefügt, um unnötige Re-Renders zu vermeiden.
- State-Update in useAlarmStatus.ts optimiert, sodass setState nur noch aufgerufen wird, wenn sich der Wert wirklich ändert.
- Performance verbessert und maximale Update-Tiefe-Fehler ("Maximum update depth exceeded") behoben.
- Code-Struktur verbessert, um stabilere Redux-Integration zu gewährleisten.
This commit is contained in:
Ismail Ali
2025-02-24 20:11:47 +01:00
parent 47e5088e1b
commit 6da44ac1c5
2 changed files with 48 additions and 27 deletions

View File

@@ -1,5 +1,5 @@
"use client"; // components/modules/kue705FO/Kue705FO.tsx "use client"; // components/modules/kue705FO/Kue705FO.tsx
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef, useMemo } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import KueModal from "./KueModal"; import KueModal from "./KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
@@ -73,23 +73,42 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
tdrActive, tdrActive,
} = useSelector((state: RootState) => state.variables); } = useSelector((state: RootState) => state.variables);
// Stelle sicher, dass alle Werte als number[] vorliegen const kueCableBreakRaw = useSelector(
const kueCableBreak = useSelector( (state: RootState) => state.variables.kueCableBreak
(state: RootState) => state.variables.kueCableBreak?.map(Number) ?? []
); );
const kueGroundFault = useSelector( const kueGroundFaultRaw = useSelector(
(state: RootState) => state.variables.kueGroundFault?.map(Number) ?? [] (state: RootState) => state.variables.kueGroundFault
); );
const kueAlarm1 = useSelector( const kueAlarm1Raw = useSelector(
(state: RootState) => state.variables.kueAlarm1?.map(Number) ?? [] (state: RootState) => state.variables.kueAlarm1
); );
const kueAlarm2 = useSelector( const kueAlarm2Raw = useSelector(
(state: RootState) => state.variables.kueAlarm2?.map(Number) ?? [] (state: RootState) => state.variables.kueAlarm2
); );
const kueOverflow = useSelector( const kueOverflowRaw = useSelector(
(state: RootState) => state.variables.kueOverflow?.map(Number) ?? [] (state: RootState) => state.variables.kueOverflow
); );
const kueCableBreak = useMemo(
() => kueCableBreakRaw?.map(Number) ?? [],
[kueCableBreakRaw]
);
const kueGroundFault = useMemo(
() => kueGroundFaultRaw?.map(Number) ?? [],
[kueGroundFaultRaw]
);
const kueAlarm1 = useMemo(
() => kueAlarm1Raw?.map(Number) ?? [],
[kueAlarm1Raw]
);
const kueAlarm2 = useMemo(
() => kueAlarm2Raw?.map(Number) ?? [],
[kueAlarm2Raw]
);
const kueOverflow = useMemo(
() => kueOverflowRaw?.map(Number) ?? [],
[kueOverflowRaw]
);
//-------------------------handlers------------------------- //-------------------------handlers-------------------------
const openModal = () => handleOpenModal(setShowModal); const openModal = () => handleOpenModal(setShowModal);
const closeModal = () => handleCloseModal(setShowModal); const closeModal = () => handleCloseModal(setShowModal);

View File

@@ -3,27 +3,29 @@ import { useEffect, useState } from "react";
const useAlarmStatus = ( const useAlarmStatus = (
slotIndex: number, slotIndex: number,
kueAlarm1: any, kueAlarm1: number[],
kueAlarm2: any, kueAlarm2: number[],
kueCableBreak: any, kueCableBreak: number[],
kueGroundFault: any kueGroundFault: number[]
) => { ) => {
const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false); const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
useEffect(() => { useEffect(() => {
const updateAlarmStatus = () => { const calculateAlarmStatus = () => {
const alarmStatus = return (
(kueAlarm1 && Number(kueAlarm1[slotIndex])) || (kueAlarm1?.[slotIndex] ?? 0) ||
(kueAlarm2 && Number(kueAlarm2[slotIndex])) || (kueAlarm2?.[slotIndex] ?? 0) ||
(kueCableBreak && Number(kueCableBreak[slotIndex])) || (kueCableBreak?.[slotIndex] ?? 0) ||
(kueGroundFault && Number(kueGroundFault[slotIndex])); (kueGroundFault?.[slotIndex] ?? 0)
);
setCurrentAlarmStatus(!!alarmStatus);
}; };
updateAlarmStatus(); const newStatus = !!calculateAlarmStatus();
const interval = setInterval(updateAlarmStatus, 10000);
return () => clearInterval(interval); // 🚀 Nur aktualisieren, wenn sich der Wert wirklich ändert!
setCurrentAlarmStatus((prevStatus) =>
prevStatus !== newStatus ? newStatus : prevStatus
);
}, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]); }, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
return currentAlarmStatus; return currentAlarmStatus;