fix: Endlosschleife im DateRangePicker behoben und Initialwerte aus Redux gesetzt
- `useEffect` entfernt, um unnötige `setState`-Aufrufe zu vermeiden - `startDate` und `endDate` werden nun direkt über `useState` aus Redux (`vonDatum`, `bisDatum`) initialisiert - Verhindert unendliche Updates durch sich wiederholende `setStartDate`- und `setEndDate`-Aufrufe - Falls keine Redux-Werte vorhanden sind, wird das aktuelle Datum als Fallback verwendet
This commit is contained in:
@@ -1,6 +1,8 @@
|
|||||||
// /components/modules/kue705FO/charts/DateRangePicker.tsx
|
// /components/modules/kue705FO/charts/DateRangePicker.tsx
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState } from "react";
|
||||||
import DatePicker from "react-datepicker";
|
import DatePicker from "react-datepicker";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { RootState } from "../../../../../redux/store";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
|
|
||||||
interface DateRangePickerProps {
|
interface DateRangePickerProps {
|
||||||
@@ -12,14 +14,21 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
|||||||
setVonDatum,
|
setVonDatum,
|
||||||
setBisDatum,
|
setBisDatum,
|
||||||
}) => {
|
}) => {
|
||||||
// Nutze die Props als Standardwerte für das Datum
|
// Redux-Werte abrufen
|
||||||
const [startDate, setStartDate] = useState<Date>(new Date());
|
const reduxVonDatum = useSelector(
|
||||||
const [endDate, setEndDate] = useState<Date>(new Date());
|
(state: RootState) => state.kabelueberwachungChart.vonDatum
|
||||||
|
);
|
||||||
|
const reduxBisDatum = useSelector(
|
||||||
|
(state: RootState) => state.kabelueberwachungChart.bisDatum
|
||||||
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
// Direkt mit Redux-Werten initialisieren, falls vorhanden
|
||||||
setVonDatum(startDate);
|
const [startDate, setStartDate] = useState<Date>(
|
||||||
setBisDatum(endDate);
|
reduxVonDatum ? new Date(reduxVonDatum) : new Date()
|
||||||
}, []);
|
);
|
||||||
|
const [endDate, setEndDate] = useState<Date>(
|
||||||
|
reduxBisDatum ? new Date(reduxBisDatum) : new Date()
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex space-x-4">
|
<div className="flex space-x-4">
|
||||||
@@ -54,7 +63,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
|||||||
selectsEnd
|
selectsEnd
|
||||||
startDate={startDate}
|
startDate={startDate}
|
||||||
endDate={endDate}
|
endDate={endDate}
|
||||||
minDate={startDate || undefined}
|
minDate={startDate}
|
||||||
dateFormat="dd.MM.yyyy"
|
dateFormat="dd.MM.yyyy"
|
||||||
className="border px-2 py-1 rounded"
|
className="border px-2 py-1 rounded"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.78";
|
const webVersion = "1.6.79";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
Reference in New Issue
Block a user