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:
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user