LEDにkeyを付与してデータの整理

components/発車時刻表/EachData.tsx

@@ -122,21 +122,21 @@ export const EachData: FC<Props> = (props) => {
       <TrainPositionDataDelete
         dialog={deleteDialog}
         setDialog={setDeleteDialog}
-        currentTrainData={currentTrainData}
-        stationInput={stationInput}
-        stationNumberInput={stationNumberInput}
+        {...{ currentTrainData, stationInput, stationNumberInput }}
       />
       <TrainPositionDataPush
         dialog={dialog}
         setDialog={setDialog}
-        currentTrainData={currentTrainData}
-        stationInput={stationInput}
-        stationNumberInput={stationNumberInput}
-        posInput={posInput}
-        descInput={descInput}
-        setPosInput={setPosInput}
-        setDescInput={setDescInput}
-        station={station}
+        {...{
+          currentTrainData,
+          stationInput,
+          stationNumberInput,
+          posInput,
+          descInput,
+          setPosInput,
+          setDescInput,
+          station,
+        }}
       />
       <TouchableOpacity
         style={{
@@ -149,6 +149,7 @@ export const EachData: FC<Props> = (props) => {
           flexDirection: "row",
         }}
         onPress={() => openTrainInfo(d)}
+        key={ d.train + "-eachData" }
       >
         <TrainName
           trainName={train.trainName}
@@ -179,7 +180,7 @@ export const EachData: FC<Props> = (props) => {
         />
       )}
       {trainDescriptionSwitch && !!train.info && (
-        <Description info={train.info} />
+        <Description info={train.info} key={d.train + "-description"} />
       )}
     </>
   );

components/発車時刻表/LED_Vision_Component/Header.js

@@ -3,8 +3,8 @@ import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
 import LottieView from "lottie-react-native";
 import { Ionicons } from "@expo/vector-icons";
 
-export const Header = ({ getCurrentTrain }) => {
-    const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
+export const Header = () => {
+    const { currentTrainLoading, setCurrentTrainLoading,getCurrentTrain } = useCurrentTrain();
     return (
       <View
         style={{

components/発車時刻表/LED_vidion.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { View } from "react-native";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+import { View,useWindowDimensions } from "react-native";
+import dayjs from "dayjs";
 import { useInterval } from "../../lib/useInterval";
 import { objectIsEmpty } from "../../lib/objectIsEmpty";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
@@ -43,7 +43,7 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
  */
 export default function LED_vision(props) {
   const { station, navigate, openStationACFromEachTrainInfo } = props;
-  const { getCurrentTrain, currentTrain } = useCurrentTrain();
+  const { currentTrain } = useCurrentTrain();
   const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
@@ -80,7 +80,10 @@ export default function LED_vision(props) {
     setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
   }, [allTrainDiagram, station]);
 
-  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
+  /*
+{lastStation: "当駅止", time: "12:34", train: "1234M"}
+  */
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState([]);
 
   useEffect(() => {
     //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
@@ -141,16 +144,15 @@ export default function LED_vision(props) {
   };
 
   const timeFiltering = (d) => {
-    const date = new Date();
-    const newDate = new Date();
-    let data = d.time.split(":");
+    const date = dayjs();
+    const newDate = dayjs();
+    let [h,m] = d.time.split(":");
     let delay = isNaN(currentTrain.filter((t) => t.num == d.train)[0].delay)
       ? 0
       : currentTrain.filter((t) => t.num == d.train)[0].delay;
 
-    date.setHours(parseInt(data[0]));
-    date.setMinutes(parseInt(data[1]) + parseInt(delay));
-    return !(newDate > date);
+    date.hour(parseInt(h)).minute(parseInt(m) + parseInt(delay));
+    return !(newDate.isAfter(date));
   };
 
   const [areaString, setAreaString] = useState("");
@@ -182,18 +184,19 @@ export default function LED_vision(props) {
     }
     setAreaStringLength(areaInfo.length);
   }, [areaInfo]);
-
+  const { width } = useWindowDimensions();
+  const adjustedWidth = width * 0.98;
   return (
     <View
       style={{
-        width: wp("98%"),
+        width: adjustedWidth,
         /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
         borderWidth: 1,
         margin: 10,
-        marginHorizontal: wp("1%"),
+        marginHorizontal: width * 0.01,
       }}
     >
-      <Header getCurrentTrain={getCurrentTrain} />
+      <Header />
       {selectedTrain.map((d) => (
         <EachData
           {...{