diff --git a/src/Main.jsx b/src/Main.jsx index 01a5a6a..f7919e9 100644 --- a/src/Main.jsx +++ b/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,86 +82,100 @@ 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 ( -
+ - + {loading ? ( + + ) : ( + + )} -
- -
- {loading ? ( -
- -
- ) : ( - - - {pagination.movies.map((item) => ( - - - - - - ))} - - )} -
- -
- - - -
+
); }; +const PaginationWrapper = ({ page, length, onPageChange }) => ( +
+ +
+); + +const Loading = () => ( +
+ +
+); + +const MoviesGrid = ({ movies, config }) => ( + + {movies.map((item) => ( + + + + + + ))} + +); + export default Main; \ No newline at end of file