useEffectの並び替えとコードのバグを修正

components/発車時刻表/LED_vidion.js

@@ -45,8 +45,8 @@ export default function LED_vision(props) {
   const { station, navigate, setTrainInfo, EachTrainInfoAsSR, trainDiagram } =
     props;
   const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
-  const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車
+  const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
-  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading");
+  const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
@@ -66,6 +66,26 @@ export default function LED_vision(props) {
     setStationDiagram(returnData);
   }, [trainDiagram, station]);
 
+  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
+
+  useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
+    if (objectIsEmpty(stationDiagram)) return () => {};
+    const getTimeData = getTime(stationDiagram, station);
+    setTrainTimeAndNumber(getTimeData);
+  }, [stationDiagram]);
+
+  const [selectedTrain, setSelectedTrain] = useState([]);
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
+      .filter(timeFiltering)
+      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
+
   const getCurrentTrain = () =>
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
@@ -120,15 +140,6 @@ export default function LED_vision(props) {
     });
   };
 
-  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
-
-  useEffect(() => {
-    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
-    if (objectIsEmpty(stationDiagram)) return () => {};
-    const getTimeData = getTime(stationDiagram, station);
-    setTrainTimeAndNumber(getTimeData);
-  }, [stationDiagram]);
-
   const timeFiltering = (d) => {
     const date = new Date();
     const newDate = new Date();
@@ -146,16 +157,6 @@ export default function LED_vision(props) {
     return false;
   };
 
-  const [selectedTrain, setSelectedTrain] = useState([]);
-  useEffect(() => {
-    if (!trainTimeAndNumber) return () => {};
-    if (!currentTrain) return () => {};
-    const data = trainTimeAndNumber
-      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
-      .filter(timeFiltering)
-      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
-    setSelectedTrain(data);
-  }, [trainTimeAndNumber, currentTrain, finalSwitch]);
   return (
     <View
       style={{
@@ -176,10 +177,9 @@ export default function LED_vision(props) {
           d={d}
           trainIDSwitch={trainIDSwitch}
           trainDescriptionSwitch={trainDescriptionSwitch}
-          props={props}
+          station={station}
           currentTrain={currentTrain}
           customTrainDataDetector={customTrainDataDetector}
-          navigate={navigate}
           setTrainInfo={setTrainInfo}
           EachTrainInfoAsSR={EachTrainInfoAsSR}
         />
@@ -279,17 +279,13 @@ const EachData = ({
   d,
   trainIDSwitch,
   trainDescriptionSwitch,
-  props,
+  station,
   currentTrain,
   customTrainDataDetector,
-  navigate,
   setTrainInfo,
   EachTrainInfoAsSR,
 }) => {
   const openTrainInfo = (d) => {
-    console.log(train);
-    console.log(d);
-    console.log(currentTrain);
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
       const timeInfo =
@@ -329,7 +325,7 @@ const EachData = ({
     }
   };
   const trainDelayStatus = getTrainDelayStatus(
-    checkDuplicateTrainData(currentTrain.filter((a) => a.num == train))
+    checkDuplicateTrainData(currentTrain.filter((a) => a.num == d.train))
   );
   return (
     <>