|  |  | 
 |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
 |  |  | import { useTranslate } from "react-admin"; | 
 |  |  | import { Box, Typography, Tabs, Tab, Stack, useTheme, Divider } from '@mui/material'; | 
 |  |  | import { CUSTOM_PAGES_DATA_INTERVAL } from '@/config/setting'; | 
 |  |  | import AgvMain from './AgvMain'; | 
 |  |  | import AgvControl from './AgvControl'; | 
 |  |  | import JsonShow from '../../JsonShow'; | 
 |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         let intervalId; | 
 |  |  |         if (sprite) { | 
 |  |  |             const agvNo = sprite.data.no; | 
 |  |  |             if (agvNo) { | 
 |  |  |                 fetchAgvInfo(agvNo); | 
 |  |  |                 intervalId = setInterval(() => { | 
 |  |  |                     fetchAgvInfo(agvNo); | 
 |  |  |                 }, CUSTOM_PAGES_DATA_INTERVAL); | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         return () => { | 
 |  |  |             setTitle(null); | 
 |  |  |             setCurAgvInfo(null); | 
 |  |  |             if (intervalId) { | 
 |  |  |                 clearInterval(intervalId) | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     }, [sprite]) | 
 |  |  |  |