完成改造

src/Main.jsx

@@ -11,16 +11,9 @@ import ConfigContext from './Config';
 import MovieCard from './components/MovieCard';
 import CategoryNav from './components/CategoryNav';
 
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
-
 const Main = () => {
   const config = useContext(ConfigContext);
-
-  const [currentCategory, setCurrentCategory] = useState(0);
-
+  const [loading, setLoading] = useState(false);
   const categories = [
     { label: '15min', idx: 0 },
     { label: '30min', idx: 1 },
@@ -28,6 +21,12 @@ const Main = () => {
     { label: '大于60min', idx: 3 },
   ];
 
+
+  const limit = 20;
+ 
+  const [currentCategory, setCurrentCategory] = useState(parseInt(localStorage.getItem('lastCategory'), 10) || 0);
+
+
   const [pagination, setPagination] = useState({
     movies: [],
     page: 1,
@@ -35,17 +34,9 @@ const Main = () => {
     length: 1,
   });
 
-  const [loading, setLoading] = useState(false);
-
-  const limit = 20;
-
-  const handleCategoryChange = (category) => {
-    setCurrentCategory(category);
-    fetchMovies(category, 1);
-  };
-
  
   const fetchMovies = useCallback(async (category, page) => {
+
     setLoading(true);
     try {
       const response = await axios.get(
@@ -76,14 +67,22 @@ const Main = () => {
   }, [config.Host, limit]);
 
   useEffect(() => {
-    const lastPage = localStorage.getItem('lastPage') || 1;
-    fetchMovies(currentCategory, lastPage);
-  }, [ currentCategory, fetchMovies]);
+    const lastPage = parseInt(localStorage.getItem('lastPage'), 10) || 1;
+    const lastCategory = localStorage.getItem('lastCategory') || 0;
+    fetchMovies(lastCategory, lastPage);
+  }, [fetchMovies]);
 
-  const handlePageChange = (event, value) => {
-    fetchMovies(currentCategory, value);
-  };
+  const handlePageChange = useCallback(async (event, page) => {
+    // console.log("handlePageChange");
+    fetchMovies(currentCategory, page);
+  }, [fetchMovies, currentCategory]);
 
+  const handleCategoryChange = useCallback(async (category) => {
+    // console.log("handleCategoryChange");
+    setCurrentCategory(category);
+    localStorage.setItem('lastCategory', category);
+    fetchMovies(category, 1);
+  }, [fetchMovies]);
 
   return (
     <Container style={{ marginTop: 20 }}>
@@ -94,6 +93,7 @@ const Main = () => {
       />
 
       <div style={{ textAlign: 'center', marginBottom: 20 }}>
+
         <Pagination
           count={pagination.length}
           page={pagination.page}
@@ -102,12 +102,13 @@ const Main = () => {
           color="primary"
           size="large"
         />
+
       </div>
 
       <div>
         {loading ? (
           <div
-            style={{display: 'flex',justifyContent: 'center',alignItems: 'center',height: '50vh'}}
+            style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
           >
             <CircularProgress />
           </div>
@@ -131,8 +132,10 @@ const Main = () => {
         )}
       </div>
 
-      <div style={{ textAlign: 'center', marginTop: 20 }}>
+      <div style={{ textAlign: 'center', marginBottom: 20 }}>
+
         <Pagination
+
           count={pagination.length}
           page={pagination.page}
           onChange={handlePageChange}
@@ -140,6 +143,7 @@ const Main = () => {
           color="primary"
           size="large"
         />
+
       </div>
     </Container>
   );

src/components/MovieCard.jsx

@@ -10,10 +10,6 @@ const MovieCard = ({ movie, config }) => {
       : filename;
   };
  
-  const theme = useTheme();
-  console.log(theme.shadows)
-  
-
   const StyledCard = styled(Card)({
     '&:hover': {
       transform: 'scale(1.05)',