diff --git a/components/Menu/Carousel/CarouselBox.tsx b/components/Menu/Carousel/CarouselBox.tsx index 3a54a9a..1315417 100644 --- a/components/Menu/Carousel/CarouselBox.tsx +++ b/components/Menu/Carousel/CarouselBox.tsx @@ -46,6 +46,29 @@ export const CarouselBox = ({ setDotButton(data === "true"); }); }, []); + const RenderItem = ({ item, index }) => { + return ( + + + + + + ); + }; return ( { - return ( - - - - - - ); - }} + renderItem={RenderItem} /> { const active = index == selectedCurrentStation; - const numberIndex = d[0].StationNumber; - if (dotButton) { - return ( - setSelectedCurrentStation(index)} - currentStation={d} - active={active} - key={numberIndex + index} - /> - ); - } else { - return ( - setSelectedCurrentStation(index)} - active={active} - key={numberIndex + index} - /> - ); - } + const numberKey = d[0].StationNumber + index; + return dotButton ? ( + setSelectedCurrentStation(index)} + currentStation={d} + active={active} + key={numberKey} + /> + ) : ( + setSelectedCurrentStation(index)} + active={active} + key={numberKey} + /> + ); })} diff --git a/menu.js b/menu.js index 09a7fdb..35460e5 100644 --- a/menu.js +++ b/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 (