修复多次渲染的问题, 把params转为对象存储, 所有状态都存储在本地存储

src/Main.jsx

@@ -1,5 +1,4 @@
-// Main.js
-import React, { useState, useEffect, useContext, useCallback } from 'react';
+import React, { useState, useEffect, useContext, useCallback, useRef} from 'react';
 import axios from 'axios';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -21,22 +20,39 @@ const Main = () => {
     { label: '大于60min', idx: 3 },
   ];
 
-
   const limit = 20;
 
-  const [currentCategory, setCurrentCategory] = useState(parseInt(localStorage.getItem('lastCategory'), 10) || 0);
+  const getInitialParams = () => {
+    const storedParams = localStorage.getItem('params');
+    if (storedParams) {
+      return JSON.parse(storedParams);
+    } else {
+      return {
+        lastPage: {
+          0: 1,
+          1: 1,
+          2: 1,
+          3: 1,
+        },
+        lastCategory: 0,
+      };
+    }
+  };
 
+  const [params, setParams] = useState(getInitialParams());
 
   const [pagination, setPagination] = useState({
     movies: [],
-    page: 1,
+    page: params.lastPage[params.lastCategory],
     total: 1,
     length: 1,
   });
 
 
-  const fetchMovies = useCallback(async (category, page) => {
+  const paramsRef = useRef(params);
+  paramsRef.current = params;
 
+  const fetchMovies = useCallback(async (category, page) => {
     setLoading(true);
     try {
       const response = await axios.get(
@@ -47,7 +63,6 @@ const Main = () => {
         const data = response.data.data;
 
         if (data.items.length === 0 && page > 1) {
-          // 如果返回的数据为空且请求的页码大于1，则尝试获取上一页的数据
           fetchMovies(category, page - 1);
         } else {
           setPagination({
@@ -56,7 +71,7 @@ const Main = () => {
             total: data.total,
             length: Math.ceil(data.total / limit),
           });
-          localStorage.setItem('lastPage', page);
+          updateParams(category, page);
         }
       }
     } catch (error) {
@@ -67,55 +82,87 @@ const Main = () => {
   }, [config.Host, limit]);
 
   useEffect(() => {
-    const lastPage = parseInt(localStorage.getItem('lastPage'), 10) || 1;
-    const lastCategory = localStorage.getItem('lastCategory') || 0;
-    fetchMovies(lastCategory, lastPage);
+
+    fetchMovies(paramsRef.current.lastCategory, paramsRef.current.lastPage[paramsRef.current.lastCategory]);
   }, [fetchMovies]);
 
-  const handlePageChange = useCallback(async (event, page) => {
-    // console.log("handlePageChange");
-    fetchMovies(currentCategory, page);
-  }, [fetchMovies, currentCategory]);
+  const updateParams = (category, page) => {
+    setParams((prevParams) => {
+      const newParams = {
+        ...prevParams,
+        lastPage: {
+          ...prevParams.lastPage,
+          [category]: page,
+        },
+      };
+      localStorage.setItem('params', JSON.stringify(newParams));
+      return newParams;
+    });
+  };
 
-  const handleCategoryChange = useCallback(async (category) => {
-    // console.log("handleCategoryChange");
-    setCurrentCategory(category);
-    localStorage.setItem('lastCategory', category);
-    fetchMovies(category, 1);
+  const handlePageChange = useCallback((event, page) => {
+    fetchMovies(params.lastCategory, page);
+    updateParams(params.lastCategory, page);
+  }, [fetchMovies, params]);
+
+  const handleCategoryChange = useCallback((category) => {
+    setParams((prevParams) => {
+      const newParams = {
+        ...prevParams,
+        lastCategory: category,
+      };
+      localStorage.setItem('params', JSON.stringify(newParams));
+      return newParams;
+    });
+    // 从 paramsRef.current 获取当前 category 对应的页面
+    fetchMovies(category, paramsRef.current.lastPage[category]);
   }, [fetchMovies]);
 
   return (
     <Container style={{ marginTop: 20 }}>
       <CategoryNav
         categories={categories}
-        currentCategory={currentCategory}
+        currentCategory={params.lastCategory}
         onCategoryChange={handleCategoryChange}
       />
 
-      <div style={{ textAlign: 'center', marginBottom: 20 }}>
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
 
+      {loading ? (
+        <Loading />
+      ) : (
+        <MoviesGrid movies={pagination.movies} config={config} />
+      )}
+
+      <PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
+    </Container>
+  );
+};
+
+const PaginationWrapper = ({ page, length, onPageChange }) => (
+  <div style={{ textAlign: 'center', marginBottom: 20 }}>
     <Pagination
-          count={pagination.length}
-          page={pagination.page}
-          onChange={handlePageChange}
+      count={length}
+      page={page}
+      onChange={onPageChange}
       shape="rounded"
       color="primary"
       size="large"
     />
-
   </div>
+);
 
-      <div>
-        {loading ? (
+const Loading = () => (
   <div
     style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
   >
     <CircularProgress />
   </div>
-        ) : (
+);
 
+const MoviesGrid = ({ movies, config }) => (
   <Grid container spacing={2} style={{ marginTop: 3 }}>
-            {pagination.movies.map((item) => (
+    {movies.map((item) => (
       <Grid item xs={6} sm={4} md={3} lg={2}
         style={{ display: 'flex', justifyContent: 'space-between' }}
         key={item.filename}
@@ -129,24 +176,6 @@ const Main = () => {
       </Grid>
     ))}
   </Grid>
-        )}
-      </div>
-
-      <div style={{ textAlign: 'center', marginBottom: 20 }}>
-
-        <Pagination
-
-          count={pagination.length}
-          page={pagination.page}
-          onChange={handlePageChange}
-          shape="rounded"
-          color="primary"
-          size="large"
-        />
-
-      </div>
-    </Container>
-  );
-};
+);
 
 export default Main;