項目の軽い整理

components/AllTrainDiagramView.js

@@ -17,12 +17,7 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
 export default function AllTrainDiagramView() {
   const { navigate } = useNavigation();
-  const { allTrainDiagram } = useAllTrainDiagram();
-  const [keyList, setKeyList] = useState(); // 第二要素
-  useEffect(
-    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
-    []
-  );
+  const { keyList } = useAllTrainDiagram();
   const [input, setInput] = useState(""); // 文字入力
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
 
@@ -48,13 +43,10 @@ export default function AllTrainDiagramView() {
         parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
       TrainNumber = timeInfo + "号";
     }
+    const type = getTrainType(train.type).data;
+    const limited = `${type}:${train.trainName}${TrainNumber}`;
     const payload = {
-      data: {
-        trainNum: d,
-        limited: `${getTrainType(train.type).data}:${
-          train.trainName
-        }${TrainNumber}`,
-      },
+      data: { trainNum: d, limited },
       navigate,
       from: "AllTrainIDList",
     };
@@ -67,11 +59,9 @@ export default function AllTrainDiagramView() {
       <FlatList
         style={{ flex: 1 }}
         data={keyList?.filter((d) => d.includes(input))}
-        renderItem={({ item }) => (
-          <Item openTrainInfo={openTrainInfo} id={item} />
-        )}
+        renderItem={({ item }) => <Item {...{ openTrainInfo, id: item }} />}
         keyExtractor={(item) => item}
-        initialNumToRender={100}
+        //initialNumToRender={100}
       />
       <KeyboardAvoidingView
         behavior="padding"
@@ -93,13 +83,9 @@ export default function AllTrainDiagramView() {
         >
           <TextInput
             placeholder="列番を入力してフィルタリングします。"
-            onFocus={() => {
-              setKeyBoardVisible(true);
-            }}
+            onFocus={() => setKeyBoardVisible(true)}
             onEndEditing={() => {}}
-            onChange={(ret) => {
-              setInput(ret.nativeEvent.text);
-            }}
+            onChange={(ret) => setInput(ret.nativeEvent.text)}
             value={input}
             style={{ flex: 1 }}
           />

components/trainMenu.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons, Ionicons } from "@expo/vector-icons";
@@ -23,8 +23,8 @@ export default function TrainMenu({ style }) {
   } = useTrainMenu();
   useEffect(() => {
     const stationPinData = [];
-    Object.keys(stationData).map((d, indexBase) => {
-      stationData[d].map((D, index) => {
+    Object.keys(stationData).forEach((d, indexBase) => {
+      stationData[d].forEach((D, index) => {
         if (!D.StationMap) return null;
         if (selectedLine && selectedLine != d) return;
         const latlng = D.StationMap.replace(
@@ -43,7 +43,7 @@ export default function TrainMenu({ style }) {
     });
     setStationPin(stationPinData);
   }, [stationData, selectedLine]);
-  useEffect(() => {
+  useLayoutEffect(() => {
     mapRef.current.fitToCoordinates(
       stationPin.map(({ latlng }) => ({
         latitude: parseFloat(latlng[0]),

stateBox/useAllTrainDiagram.js

@@ -6,12 +6,15 @@ const initialState = {
 
 const AllTrainDiagramContext = createContext(initialState);
 
-export const useAllTrainDiagram = () => {
-  return useContext(AllTrainDiagramContext);
-};
+export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext);
 
 export const AllTrainDiagramProvider = ({ children }) => {
   const [allTrainDiagram, setAllTrainDiagram] = useState();
+  const [keyList, setKeyList] = useState(); // 第二要素
+  useEffect(
+    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
+    [allTrainDiagram]
+  );
   const customData = {};
   useEffect(() => {
     fetch(
@@ -55,7 +58,7 @@ export const AllTrainDiagramProvider = ({ children }) => {
 
   return (
     <AllTrainDiagramContext.Provider
-      value={{ allTrainDiagram, setAllTrainDiagram }}
+      value={{ allTrainDiagram, setAllTrainDiagram,keyList }}
     >
       {children}
     </AllTrainDiagramContext.Provider>