CarouselBoxコンポーネントのrenderItem関数を分離し、MenuコンポーネントでのcurrentStationの管理をnearPositionStationに変更

components/Menu/Carousel/CarouselBox.tsx

@@ -46,6 +46,29 @@ export const CarouselBox = ({
       setDotButton(data === "true");
     });
   }, []);
+  const RenderItem = ({ item, index }) => {
+    return (
+      <View
+        style={{
+          backgroundColor: "#0000",
+          width,
+          flexDirection: "row",
+          marginLeft: 0,
+          marginRight: 0,
+        }}
+        key={item[0].StationNumber}
+      >
+        <View style={{ flex: 1 }} />
+        <Sign
+          stationID={item[0].StationNumber}
+          isCurrentStation={item == currentStation}
+          oP={oPSign}
+          oLP={oLPSign}
+        />
+        <View style={{ flex: 1 }} />
+      </View>
+    );
+  };
   return (
     <View style={{ flex: 1, paddingTop: 10 }}>
       <Carousel
@@ -64,29 +87,7 @@ export const CarouselBox = ({
           parallaxAdjacentItemScale: 0.8,
         }}
         onSnapToItem={setSelectedCurrentStation}
-        renderItem={({ item, index }) => {
-          return (
-            <View
-              style={{
-                backgroundColor: "#0000",
-                width,
-                flexDirection: "row",
-                marginLeft: 0,
-                marginRight: 0,
-              }}
-              key={item[0].StationNumber}
-            >
-              <View style={{ flex: 1 }} />
-              <Sign
-                stationID={item[0].StationNumber}
-                isCurrentStation={item == currentStation}
-                oP={oPSign}
-                oLP={oLPSign}
-              />
-              <View style={{ flex: 1 }} />
-            </View>
-          );
-        }}
+        renderItem={RenderItem}
       />
       <View
         style={{
@@ -99,25 +100,21 @@ export const CarouselBox = ({
         {originalStationList &&
           allStationData.map((d, index) => {
             const active = index == selectedCurrentStation;
-            const numberIndex = d[0].StationNumber;
-            if (dotButton) {
-              return (
-                <StationNumber
-                  onPress={() => setSelectedCurrentStation(index)}
-                  currentStation={d}
-                  active={active}
-                  key={numberIndex + index}
-                />
-              );
-            } else {
-              return (
-                <SimpleDot
-                  onPress={() => setSelectedCurrentStation(index)}
-                  active={active}
-                  key={numberIndex + index}
-                />
-              );
-            }
+            const numberKey = d[0].StationNumber + index;
+            return dotButton ? (
+              <StationNumber
+                onPress={() => setSelectedCurrentStation(index)}
+                currentStation={d}
+                active={active}
+                key={numberKey}
+              />
+            ) : (
+              <SimpleDot
+                onPress={() => setSelectedCurrentStation(index)}
+                active={active}
+                key={numberKey}
+              />
+            );
           })}
       </View>
     </View>

menu.js

@@ -84,7 +84,8 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
     let returnDataBase = lineList
       .map((d) => findStationEachLine(originalStationList[d]))
       .filter((d) => {
-        return d.length > 0})
+        return d.length > 0;
+      })
       .reduce((pre, current) => {
         pre.push(...current);
         return pre;
@@ -92,14 +93,14 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
     if (returnDataBase.length) {
       let currentStation = currentStation == undefined ? [] : currentStation;
       if (currentStation.toString() != returnDataBase.toString()) {
-        setCurrentStation(returnDataBase);
+        setNearPositionStation(returnDataBase);
       }
     } else {
-      setCurrentStation(undefined);
+      setNearPositionStation(undefined);
     }
   };
 
-  const [currentStation, setCurrentStation] = useState(undefined); //第三要素
+  const [nearPositionStation, setNearPositionStation] = useState(undefined); //第三要素
 
   const carouselRef = useRef();
   const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
@@ -107,16 +108,12 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
   const [allStationData, setAllStationData] = useState([]);
   useEffect(() => {
     if (stationListMode == "position") {
-      console.log(currentStation);
-      setAllStationData(
-        [currentStation].filter((d) => d != undefined)
-      );
+      console.log(nearPositionStation);
+      setAllStationData([nearPositionStation].filter((d) => d != undefined));
     } else {
-      setAllStationData(
-        favoriteStation.filter((d) => d != undefined)
-      );
+      setAllStationData(favoriteStation.filter((d) => d != undefined));
     }
-  }, [currentStation, favoriteStation, stationListMode]);
+  }, [nearPositionStation, favoriteStation, stationListMode]);
   useEffect(() => {
     if (allStationData.length == 0) {
       setSelectedCurrentStation(0);
@@ -126,7 +123,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
       const count = selectedCurrentStation - 1;
       setSelectedCurrentStation(count);
     }
-  }, [selectedCurrentStation, currentStation, allStationData]);
+  }, [selectedCurrentStation, nearPositionStation, allStationData]);
   useEffect(() => {
     if (!carouselRef.current) return;
     carouselRef?.current.scrollTo({
@@ -136,12 +133,10 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
   }, [selectedCurrentStation]);
 
   useEffect(() => {
+    if (originalStationList == undefined) return;
     if (allStationData.length == 0) return;
     if (allStationData[selectedCurrentStation] == undefined) return;
-    const { lat, lng } =
-      originalStationList &&
-      allStationData[selectedCurrentStation] &&
-      allStationData[selectedCurrentStation][0];
+    const { lat, lng } = allStationData[selectedCurrentStation][0];
     const mapRegion = {
       latitude: lat,
       longitude: lng,
@@ -149,7 +144,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
       longitudeDelta: 0.05,
     };
     mapsRef.current.animateToRegion(mapRegion, 1000);
-  }, [selectedCurrentStation, currentStation, allStationData, mapsRef]);
+  }, [selectedCurrentStation, nearPositionStation, allStationData, mapsRef]);
   return (
     <View
       style={{
@@ -204,7 +199,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
               {...{
                 originalStationList,
                 allStationData,
-                currentStation,
+                currentStation: nearPositionStation,
                 setSelectedCurrentStation,
                 carouselRef,
                 selectedCurrentStation,