1

src/pages/index.tsx

@@ -2,15 +2,19 @@ import Head from "next/head";
 import Container from "@mui/material/Container";
 import { Stack } from "@mui/material";
 import { DividerBox } from "@/components/base/boxes";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export default function Home() {
   const [data, setData] = useState(0)
-  useEffect(() => {
+  const update = useCallback(
+
     (async () => {
       const res=  (await ((await fetch('/api/get_file_list')).json()))
       setData(res.file_list[0]);
-    })()
+    }), []
+  )
+  useEffect(() => {
+    update()
   }, [])
   return (
     <>
@@ -22,7 +26,7 @@ export default function Home() {
 
       <Container component="main" sx={{ minHeight: "90vh" }}>
         <Stack spacing={4} useFlexGap>
-          <div style={{color: 'red'}}>{data}</div>
+          <button style={{color: 'red'}} onClick={update}>{data}</button>
 
         </Stack>
       </Container>