add useRef in FE SPA

backend/public/css/app.css

@@ -11082,11 +11082,11 @@ h3 {
  * notification...お知らせエリアのコンポーネントです。
  * meeting...ミーティングエリアのコンポーネントです。
  * article...詳細ページのコンポーネントです。
- * modal...モーダルのコンポーネントです。
- * search...検索ページのコンポーネントです。
+ * modal...モーダルのコンポーネントです。 
+ * search...検索ページのコンポーネントです。 
  * profile...プロフィールページのコンポーネントです。
  * edit...エディットページのコンポーネントです。
- *
+ * 
  * SCOPE
  * blog...ブログページのスタイルです。
  *
@@ -12255,14 +12255,10 @@ categories: [layout]
     background-image: url(/assets/img/icon/list-black.svg);
   }
 }
-
-.mypage-nav-list__item.nav-active .icon.star:before {
+@media screen and (max-width: 1067px) {
+  .mypage-nav-list__item.nav-active .icon.star:before {
     background-image: url(/assets/img/icon/star-outline-yellow02.svg);
-}
-@media screen and (min-width: 1068px) {
-    .mypage-nav-list__item.nav-active .icon.star:before {
-        background-image: url(/assets/img/icon/star-outline-black.svg);
-    }
+  }
 }
 .mypage-nav-list__item.nav-active .icon.parents:before {
   background-image: url(/assets/img/icon/people-yellow.svg);
@@ -12299,6 +12295,11 @@ categories: [layout]
     display: none;
   }
 }
+@media screen and (min-width: 1068px) {
+  .mypage-nav-list__item.-favorite {
+    display: none;
+  }
+}
 .mypage-nav-list__item a {
   display: flex;
   align-items: center;
@@ -12929,7 +12930,7 @@ categories: [project]
 @font-face {
   font-family: "iconfont";
   src: url(/fonts/iconfont.eot?9bd2f8e21fb68f3cb69f306c7a5a07d2);
-  src: url(/fonts/iconfont.eot?9bd2f8e21fb68f3cb69f306c7a5a07d2) format("eot"), url(/fonts/iconfont.woff?72290a51f520574be856b3621acc29a1) format("woff"), url(/fonts/iconfont.ttf?e240ce427caf7549e576c77b39a1d3f1) format("truetype"), url(/fonts/iconfont.svg?d812f238f7ec32f5cb5ebd322f320a02) format("svg");
+  src: url(/fonts/iconfont.eot?9bd2f8e21fb68f3cb69f306c7a5a07d2) format("eot"), url(/fonts/iconfont.woff?72290a51f520574be856b3621acc29a1) format("woff"), url(/fonts/iconfont.ttf?e240ce427caf7549e576c77b39a1d3f1) format("truetype"), url(/fonts/iconfont.svg?9e48c54f8bbb472c1c286234fdd6636f) format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -13210,7 +13211,7 @@ Modifierは以下のとおりです。
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
-/*
+/* 
 .p-btn {
   display: inline-block;
   margin: 0;

backend/resources/js/admin/child/detail.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import axios from 'axios';
 
@@ -25,8 +25,11 @@ const ChildDetail = (props) => {
     const [_422errors, set422Errors] = useState({ image: '' });
     const [_success, setSuccess] = useState(props.history.location.state);
     const [show_confirm_modal, setShowConfirmModal] = useState(false);
+
+    const isMountedRef = useRef(true);
     
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         axios.get(`/api/admin/children/detail/${props.match.params?.child_id}`)
         .then(response => {

backend/resources/js/admin/child/edit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { LoadingButton } from '@material-ui/lab';
@@ -33,8 +33,10 @@ const ChildEdit = (props) => {
     const [submit, setSubmit] = useState(false);
     const [loaded, setLoaded] = useState(false);
 
-
+    const isMountedRef = useRef(true);
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         axios.get(`/api/admin/children/detail/${props.match.params?.child_id}`)
         .then(response => {

backend/resources/js/admin/child/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { CircularProgress  } from '@material-ui/core';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
@@ -22,7 +22,10 @@ const Child = (props) => {
   const [_400error, set400Error] = useState('');
   const [_success, setSuccess] = useState(props.history.location.state);
 
+  const isMountedRef = useRef(true);
+  
   useEffect(() => {
+    isMountedRef.current = false;
     setLoaded(false);
     axios.get('/api/admin/children/list')
     .then((response) => {

backend/resources/js/admin/meeting/detail.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
 import axios from 'axios';
@@ -25,8 +25,10 @@ const MeetingDetail = (props) => {
   const [show_pdf_modal, setShowPDFModal] = useState(false);
   const [show_memo_modal, setShowMemoModal] = useState(false);
   
+  const isMountedRef = useRef(true);
   
   useEffect(() => {
+    isMountedRef.current = false;
     setLoaded(false);
     axios.get(`/api/admin/meetings/detail/${props.match.params?.meeting_id}`)
     .then((response) => {

backend/resources/js/admin/meeting/edit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { CircularProgress  } from '@material-ui/core';
@@ -34,7 +34,9 @@ const MeetingEdit = (props) => {
     const [check_radio, setCheckRadio] = useState(null);
     const [image_sending, setImageSending] = useState(false);
 
-
+    const isMountedRef = useRef(true);
+    
+    
     useEffect(()=>{
         if(!loaded) return;      //if dont load data
         var list = [...children_list];
@@ -54,6 +56,7 @@ const MeetingEdit = (props) => {
 
     
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         axios.get(`/api/admin/meetings/detail/${meeting_id}`)
         .then(response => {

backend/resources/js/admin/meeting/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { CircularProgress  } from '@material-ui/core';
 import moment from 'moment';
 import axios from 'axios';
@@ -22,16 +22,19 @@ const Meeting = (props) => {
   const [_422errors, set422errors] = useState({keyword:''});
   const [_success, setSuccess] = useState(props.history.location.state);
 
-
+  const isMountedRef = useRef(true);
+  
+  
   useEffect(()=>{
-      if(localStorage.getItem("from_login")){
-        setSuccess("ログインに成功しました!");
-        localStorage.removeItem("from_login");
-      }
+    if(localStorage.getItem("from_login")){
+      setSuccess("ログインに成功しました!");
+      localStorage.removeItem("from_login");
+    }
   },[]);
-
-
+  
+  
   useEffect(() => {
+    isMountedRef.current = false;
     setLoaded(false);
     axios.get('/api/admin/meetings/list').then(response => {
       setLoaded(true);

backend/resources/js/admin/parent/detail.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import axios from 'axios';
 
@@ -32,7 +32,11 @@ const ParentDetail = (props) => {
     const [_success, setSuccess] = useState(props.history.location.state);
     const [show_confirm_modal, setShowConfirmModal] = useState(false);
 
+    const isMountedRef = useRef(true);
+    
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         axios.get(`/api/admin/fathers/detail/${props.match.params?.father_id}`)
         .then(response => {

backend/resources/js/admin/parent/edit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { LoadingButton } from '@material-ui/lab';
@@ -29,8 +29,10 @@ const ParentEdit = (props) => {
     const [submit, setSubmit] = useState(false);
     const [loaded, setLoaded] = useState(false);
 
-
+    const isMountedRef = useRef(true);
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         axios.get(`/api/admin/fathers/detail/${props.match.params?.father_id}`)
         .then(response => {

backend/resources/js/admin/parent/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { CircularProgress  } from '@material-ui/core';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
@@ -21,7 +21,10 @@ const Parent = (props) => {
   const [_400error, set400Error] = useState('');
   const [_success, setSuccess] = useState(props.history.location.state);
 
+  const isMountedRef = useRef(true);
+    
   useEffect(() => {
+    isMountedRef.current = false;
     setLoaded(false);
     axios.get('/api/admin/fathers/list')
     .then((response) => {

backend/resources/js/child/meeting/detail.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { Link, useHistory } from 'react-router-dom';
 import { CircularProgress  } from '@material-ui/core';
@@ -27,7 +27,11 @@ const MeetingDetail = (props) => {
     const [_404error, set404Error] = useState('');
     const [_success, setSuccess] = useState('');
 
+    const isMountedRef = useRef(true);
+    
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         let child_id = document.getElementById('child_id').value;
         axios.get(`/api/children/meetings/detail/${props.match.params?.meeting_id}`, {params:{child_id: child_id}})

backend/resources/js/child/meeting/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
@@ -25,56 +25,58 @@ const Meeting = () => {
     const [_success, setSuccess] = useState('');
     const [_400error, set400Error] = useState('');
 
+    const isMountedRef = useRef(true);
+    
+    
     useEffect(()=>{
         if(localStorage.getItem("from_login")){
-          setSuccess("ログインに成功しました!");
-          localStorage.removeItem("from_login");
+            setSuccess("ログインに成功しました!");
+            localStorage.removeItem("from_login");
         }
     },[]);
-
+    
     useEffect(()=>{
         setLoaded(loaded1 && loaded2);
     },[loaded1, loaded2])
+    
+    
+    useEffect(() => {
+        isMountedRef.current = false;
+        setLoaded(false);
+        let child_id = document.getElementById('child_id').value;
 
+        axios.get('/api/children/meetings/listOfNonApprovalOfChild', {params:{child_id: child_id}})
+        .then(response => {
+            setLoaded1(true);
+            setNotice(response.data.notice);
+            if(response.data.status_code==200){
+                setMettingListNonApproval(response.data.params);
+                var len = response.data.params.length;
+                if(len > INFINITE)
+                    setFetchMettingListNonApproval(response.data.params.slice(0, INFINITE));
+                else setFetchMettingListNonApproval(response.data.params.slice(0, len));
+            }
+            else {
+                set400Error("失敗しました。");
+            }
+        })
 
-    useEffect(
-        () => {
-            setLoaded(false);
-            let child_id = document.getElementById('child_id').value;
-
-            axios.get('/api/children/meetings/listOfNonApprovalOfChild', {params:{child_id: child_id}})
-            .then(response => {
-                setLoaded1(true);
-                setNotice(response.data.notice);
-                if(response.data.status_code==200){
-                    setMettingListNonApproval(response.data.params);
-                    var len = response.data.params.length;
-                    if(len > INFINITE)
-                        setFetchMettingListNonApproval(response.data.params.slice(0, INFINITE));
-                    else setFetchMettingListNonApproval(response.data.params.slice(0, len));
-                }
-                else {
-                    set400Error("失敗しました。");
-                }
-            })
-
-            axios.get('/api/children/meetings/listOfApprovalOfChild', {params:{child_id: child_id}})
-            .then(response => {
-                setLoaded2(true);
-                setNotice(response.data.notice);
-                if(response.data.status_code==200){
-                    setMettingListApproval(response.data.params);
-                    var len = response.data.params.length;
-                    if(len > INFINITE)
-                        setFetchMettingListApproval(response.data.params.slice(0, INFINITE));
-                    else setFetchMettingListApproval(response.data.params.slice(0, len));
-                }
-                else {
-                    set400Error("失敗しました。");
-                }
-            })
-        },[]
-    );
+        axios.get('/api/children/meetings/listOfApprovalOfChild', {params:{child_id: child_id}})
+        .then(response => {
+            setLoaded2(true);
+            setNotice(response.data.notice);
+            if(response.data.status_code==200){
+                setMettingListApproval(response.data.params);
+                var len = response.data.params.length;
+                if(len > INFINITE)
+                    setFetchMettingListApproval(response.data.params.slice(0, INFINITE));
+                else setFetchMettingListApproval(response.data.params.slice(0, len));
+            }
+            else {
+                set400Error("失敗しました。");
+            }
+        })
+    },[]);
 
     const fetchMoreListNonApproval = () => {
         setTimeout(() => {

backend/resources/js/child/parent/detail.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import { CircularProgress  } from '@material-ui/core';
@@ -16,30 +16,31 @@ const ParentDetail = (props) => {
     const [_400error, set400Error] = useState('');
     const [_404error, set404Error] = useState('');
     const [_success, setSuccess] = useState('');
-
-    useEffect(
-        () => {
-            setLoaded(false);
-            axios.get('/api/children/fathers/detail/'+props.match.params.father_id)
-            .then(response => {
-                setLoaded(true);
-                setNotice(response.data.notice);
-                if(response.data.status_code==200){
-                    setParent(response.data.params);
-                }
-                else {
-                    set400Error("失敗しました。");
-                }
-            })
-            .catch(err=>{
-                setLoaded(true);
-                setNotice(err.response.data.notice);
-                if(err.response.status==404){
-                    set404Error(err.response.data.message);
-                }
-            })
-        },[]
-    );
+    
+    const isMountedRef = useRef(true);
+    
+    useEffect(() => {
+        isMountedRef.current = false;
+        setLoaded(false);
+        axios.get('/api/children/fathers/detail/'+props.match.params.father_id)
+        .then(response => {
+            setLoaded(true);
+            setNotice(response.data.notice);
+            if(response.data.status_code==200){
+                setParent(response.data.params);
+            }
+            else {
+                set400Error("失敗しました。");
+            }
+        })
+        .catch(err=>{
+            setLoaded(true);
+            setNotice(err.response.data.notice);
+            if(err.response.status==404){
+                set404Error(err.response.data.message);
+            }
+        })
+    },[]);
 
     useEffect(()=>{
         var navbar_list = document.getElementsByClassName("mypage-nav-list__item");

backend/resources/js/child/parent/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import { CircularProgress  } from '@material-ui/core';
@@ -20,8 +20,10 @@ const Parent = () => {
     const [_400error, set400Error] = useState('');
     const [_success, setSuccess] = useState('');
 
-
+    const isMountedRef = useRef(true);
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         let child_id = document.getElementById('child_id').value;
         axios.get('/api/children/fathers/listOfChild', {params: {child_id: child_id}})

backend/resources/js/child/profile/edit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { LoadingButton } from '@material-ui/lab';
@@ -36,8 +36,10 @@ const ProfileEdit = () => {
     const [submit, setSubmit] = useState(false);
     const [loaded, setLoaded] = useState(false);
 
+    const isMountedRef = useRef(true);
     
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         let child_id = document.getElementById('child_id').value;
         axios.get('/api/children/detail/'+child_id)

backend/resources/js/child/profile/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import IconButton from "@material-ui/core/IconButton";
 import axios from 'axios';
@@ -21,9 +21,11 @@ const Profile = (props) => {
     const [_422errors, set422Errors] = useState({ image: '' });
     const [_success, setSuccess] = useState(props.history.location.state);
     const [submit_image, setSubmitImage] = useState(false);
-    
 
+    const isMountedRef = useRef(true);
+        
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         let child_id = document.getElementById('child_id').value;
         axios.get('/api/children/detail/'+child_id)

backend/resources/js/child/profile/password_edit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { LoadingButton } from '@material-ui/lab';
 import axios from 'axios';

backend/resources/js/child/profile/withdrawal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import axios from 'axios';
 import { LoadingButton } from '@material-ui/lab';
 

backend/resources/js/component/modal_memo.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
     Box,
     Dialog,

backend/resources/js/component/modal_setting_notify.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import axios from 'axios';
 import Dialog from '@mui/material/Dialog';
@@ -28,7 +28,10 @@ export default function ModalSettingNotify({show, handleClose, meetingId}){
   const [loaded2, setLoaded2] = useState(false);
   const [loaded, setLoaded] = useState(false);
 
+  const isMountedRef = useRef(true);
+  
   useEffect(() => {
+    isMountedRef.current = false;
     setLoaded1(false);
     axios.get('/api/fathers/meeting/approvals/listChildrenOfApprovel', {params: { meeting_id: meetingId }})
     .then((response) => {
@@ -37,9 +40,6 @@ export default function ModalSettingNotify({show, handleClose, meetingId}){
         setApproval(response.data.params);
       } 
     });
-  }, []);
-
-  useEffect(() => {
     setLoaded2(false);
     axios.get('/api/fathers/meeting/approvals/listChildrenOfUnapprovel', {params: { meeting_id: meetingId }})
     .then((response) => {
@@ -50,10 +50,12 @@ export default function ModalSettingNotify({show, handleClose, meetingId}){
     });
   }, []);
 
+
   useEffect(()=>{
     setLoaded(loaded1 && loaded2);
   },[loaded1, loaded2]);
 
+  
   const settingNotify = (email) => {
     const formdata = new FormData();
     formdata.append('email', JSON.stringify(new Array(email)));

backend/resources/js/parent/child/detail.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { Link, useHistory } from 'react-router-dom';
 import { CircularProgress  } from '@material-ui/core';
@@ -21,8 +21,10 @@ const ChildDetail = (props) => {
     
     const father_id = document.getElementById('father_id').value;
     const child_id = props.match.params.child_id;
-
+    const isMountedRef = useRef(true);
+    
     useEffect(() => {
+      isMountedRef.current = false;
       setLoaded(false);
       axios.get('/api/fathers/children/detail/'+child_id, {params:{father_id: father_id}})
       .then(response => {

backend/resources/js/parent/child/edit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import ja from "date-fns/locale/ja";
 import DatePicker, { registerLocale } from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -27,7 +27,10 @@ const ChildEdit = (props) => {
   const father_id = document.getElementById('father_id').value;
   const child_id = props.match.params.child_id;
 
+  const isMountedRef = useRef(true);
+  
   useEffect(() => {
+    isMountedRef.current = false;
     setLoaded(false);
     axios.get('/api/fathers/children/detail/'+child_id, {params:{father_id: father_id}})
     .then(response => {

backend/resources/js/parent/child/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import { CircularProgress  } from '@material-ui/core';
@@ -20,7 +20,10 @@ const Child = (props) => {
     const [_success, setSuccess] = useState(props.history.location.state);
     const [_400error, set400Error] = useState('');
 
+    const isMountedRef = useRef(true);
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         let father_id = document.getElementById('father_id').value;
         axios.get('/api/fathers/children/listOfFather', {params: {father_id: father_id}})

backend/resources/js/parent/favorite/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
@@ -26,13 +26,16 @@ const Favorite = (props) => {
     const [fetch_meeting_list_favorite, setFetchMeetingListOfFavorite] = useState([]);
     const [_success, setSuccess] = useState(props.history.location.state);
     const [_400error, set400Error] = useState('');
-   
+
+    const isMountedRef = useRef(true);
+    
     useEffect(()=>{
-        setLoaded(loaded1 && loaded2);
+      setLoaded(loaded1 && loaded2);
     },[loaded1, loaded2])
-
-
+    
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         let father_id = document.getElementById('father_id').value;
         axios.get('/api/fathers/meetings/listOfNonFavoriteOfFather', {params:{father_id: father_id}})

backend/resources/js/parent/meeting/add.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { CircularProgress  } from '@material-ui/core';
@@ -33,8 +33,10 @@ const MeetingAdd = (props) => {
     const [check_radio, setCheckRadio] = useState('');
 
     const state = props.history.location.state;
-    
-    useEffect(()=>{
+    const isMountedRef = useRef(true);
+
+    useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         if(state){
             setLoaded(true);

backend/resources/js/parent/meeting/detail.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import moment from 'moment';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
@@ -10,7 +10,6 @@ import ModalPdf from '../../component/pdf/modal_pdf';
 import Notification from '../notification';
 import ModalSettingNotify from '../../component/modal_setting_notify';
 import Alert from '../../component/alert';
-import { memo } from 'react';
 
 
 const MeetingDetail = (props) => {
@@ -32,8 +31,10 @@ const MeetingDetail = (props) => {
 
   const [meeting, setMeeting] = useState(null);
   const [thumbnail, setThumbnail] = useState(null);
+  const isMountedRef = useRef(true);
 
   useEffect(() => {
+    isMountedRef.current = false;
     let father_id = document.getElementById('father_id').value;
     setLoaded(false);
     axios.get(`/api/fathers/meetings/detail/${props.match.params?.meeting_id}`, {params: { father_id: father_id}})

backend/resources/js/parent/meeting/edit.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import axios from 'axios';
 import { CircularProgress  } from '@material-ui/core';
@@ -41,8 +41,10 @@ const MeetingEdit = (props) => {
     const [check_radio, setCheckRadio] = useState(null);
     const [image_sending, setImageSending] = useState(false);
 
+    const isMountedRef = useRef(true);
 
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         axios.get(`/api/fathers/meetings/detail/${meeting_id}`, {params: { father_id: father_id}})
         .then(response => {

backend/resources/js/parent/meeting/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import axios from 'axios';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
@@ -27,6 +27,9 @@ const Meeting = (props) => {
     const [_success, setSuccess] = useState(props.history.location?.state);
     const [_400error, set400Error] = useState('');
 
+    const isMountedRef = useRef(true);
+
+
     useEffect(()=>{
       if(localStorage.getItem("from_login")){
         setSuccess("ログインに成功しました!");
@@ -44,6 +47,7 @@ const Meeting = (props) => {
 
 
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         let father_id = document.getElementById('father_id').value;
         if(localStorage.getItem('flag')=="true") return;

backend/resources/js/parent/profile/edit.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { CircularProgress  } from '@material-ui/core';
 import { LoadingButton } from '@material-ui/lab';
 import Notification from '../notification';
@@ -29,7 +29,10 @@ const ProfileEdit = () => {
   const [loaded, setLoaded] = useState(false);
   const [submit, setSubmit] = useState(false);
 
+  const isMountedRef = useRef(true);
+
   useEffect(() => {
+    isMountedRef.current = false;
     setLoaded(false);
     axios.get(`/api/fathers/detail/${father_id}`)
     .then(response => {

backend/resources/js/parent/profile/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { useHistory, Link } from 'react-router-dom';
 import IconButton from "@material-ui/core/IconButton";
 import axios from 'axios';
@@ -22,8 +22,10 @@ const Profile = (props) => {
     const [submit_image, setSubmitImage] = useState(false);
 
     const father_id = document.getElementById('father_id').value;
-
+    const isMountedRef = useRef(true);
+    
     useEffect(() => {
+        isMountedRef.current = false;
         setLoaded(false);
         axios.get('/api/fathers/detail/'+father_id)
         .then(response => {