ふぁぼstateをトップ階層に移動し各コンポーネントで共有化

components/駅名表/Sign.js

@@ -17,24 +17,19 @@ import { useInterval } from "../../lib/useInterval";
 import { AS } from "../../storageControl";
 
 export default function Sign(props) {
-  const { currentStation, originalStationList, oP } = props;
+  const {
+    currentStation,
+    originalStationList,
+    oP,
+    favoriteStation,
+    setFavoriteStation,
+  } = props;
   const [nexPrePosition, setNexPrePosition] = useState(0);
 
   const [preStation, setPreStation] = useState();
   const [nexStation, setNexStation] = useState();
   const [testButtonStatus, setTestButtonStatus] = useState(false);
-  const [favoriteStation, setFavoriteStation] = useState([]);
 
-  useEffect(() => {
-    AS.getItem("favoriteStation")
-      .then((d) => {
-        console.log(d);
-        const returnData = JSON.parse(d);
-        console.log(returnData);
-        setFavoriteStation(returnData);
-      })
-      .catch((d) => console.log(d));
-  }, []);
   useEffect(() => {
     const isFavorite = favoriteStation.filter((d) => {
       const compare = JSON.stringify(d);
@@ -116,12 +111,14 @@ export default function Sign(props) {
               }
             });
             AS.setItem("favoriteStation", JSON.stringify(otherData));
+            setFavoriteStation(otherData);
           } else {
             lottieRef.current.play(7, 35);
             let ret = favoriteStation;
             console.log(currentStation);
             ret.push(currentStation);
             AS.setItem("favoriteStation", JSON.stringify(ret));
+            setFavoriteStation(ret);
           }
           setTestButtonStatus(!testButtonStatus);
         }}