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

components/Menu/Carousel/CarouselBox.tsx

@@ -46,25 +46,7 @@ export const CarouselBox = ({
       setDotButton(data === "true");
     });
   }, []);
-  return (
+  const RenderItem = ({ item, index }) => {
-    <View style={{ flex: 1, paddingTop: 10 }}>
-      <Carousel
-        ref={carouselRef}
-        data={allStationData}
-        height={(((width / 100) * 80) / 20) * 9 + 10}
-        pagingEnabled={true}
-        snapEnabled={true}
-        loop={false}
-        width={width}
-        style={{ width: width, alignContent: "center" }}
-        mode="parallax"
-        modeConfig={{
-          parallaxScrollingScale: 1,
-          parallaxScrollingOffset: 100,
-          parallaxAdjacentItemScale: 0.8,
-        }}
-        onSnapToItem={setSelectedCurrentStation}
-        renderItem={({ item, index }) => {
     return (
       <View
         style={{
@@ -86,7 +68,26 @@ export const CarouselBox = ({
         <View style={{ flex: 1 }} />
       </View>
     );
+  };
+  return (
+    <View style={{ flex: 1, paddingTop: 10 }}>
+      <Carousel
+        ref={carouselRef}
+        data={allStationData}
+        height={(((width / 100) * 80) / 20) * 9 + 10}
+        pagingEnabled={true}
+        snapEnabled={true}
+        loop={false}
+        width={width}
+        style={{ width: width, alignContent: "center" }}
+        mode="parallax"
+        modeConfig={{
+          parallaxScrollingScale: 1,
+          parallaxScrollingOffset: 100,
+          parallaxAdjacentItemScale: 0.8,
         }}
+        onSnapToItem={setSelectedCurrentStation}
+        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;
+            const numberKey = d[0].StationNumber + index;
-            if (dotButton) {
+            return dotButton ? (
-              return (
               <StationNumber
                 onPress={() => setSelectedCurrentStation(index)}
                 currentStation={d}
                 active={active}
-                  key={numberIndex + index}
+                key={numberKey}
               />
-              );
+            ) : (
-            } else {
-              return (
               <SimpleDot
                 onPress={() => setSelectedCurrentStation(index)}
                 active={active}
-                  key={numberIndex + index}
+                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);
+      console.log(nearPositionStation);
-      setAllStationData(
+      setAllStationData([nearPositionStation].filter((d) => d != undefined));
-        [currentStation].filter((d) => d != undefined)
-      );
     } else {
-      setAllStationData(
+      setAllStationData(favoriteStation.filter((d) => d != undefined));
-        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 } =
+    const { lat, lng } = allStationData[selectedCurrentStation][0];
-      originalStationList &&
-      allStationData[selectedCurrentStation] &&
-      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,