修复多次渲染的问题, 把params转为对象存储, 所有状态都存储在本地存储
This commit is contained in:
parent
aafd26d853
commit
e04d5842dd
177
src/Main.jsx
177
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 (
|
||||
<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} />
|
||||
|
||||
<Pagination
|
||||
count={pagination.length}
|
||||
page={pagination.page}
|
||||
onChange={handlePageChange}
|
||||
shape="rounded"
|
||||
color="primary"
|
||||
size="large"
|
||||
/>
|
||||
{loading ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<MoviesGrid movies={pagination.movies} config={config} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{loading ? (
|
||||
<div
|
||||
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}
|
||||
>
|
||||
<CircularProgress />
|
||||
</div>
|
||||
) : (
|
||||
|
||||
<Grid container spacing={2} style={{ marginTop: 3 }}>
|
||||
{pagination.movies.map((item) => (
|
||||
<Grid item xs={6} sm={4} md={3} lg={2}
|
||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
||||
key={item.filename}
|
||||
>
|
||||
<Link
|
||||
to={`/res/${item.filename}`}
|
||||
style={{ textDecoration: 'none', paddingBottom: 10 }}
|
||||
>
|
||||
<MovieCard movie={item} config={config} />
|
||||
</Link>
|
||||
</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>
|
||||
<PaginationWrapper page={pagination.page} length={pagination.length} onPageChange={handlePageChange} />
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const PaginationWrapper = ({ page, length, onPageChange }) => (
|
||||
<div style={{ textAlign: 'center', marginBottom: 20 }}>
|
||||
<Pagination
|
||||
count={length}
|
||||
page={page}
|
||||
onChange={onPageChange}
|
||||
shape="rounded"
|
||||
color="primary"
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
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 }}>
|
||||
{movies.map((item) => (
|
||||
<Grid item xs={6} sm={4} md={3} lg={2}
|
||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
||||
key={item.filename}
|
||||
>
|
||||
<Link
|
||||
to={`/res/${item.filename}`}
|
||||
style={{ textDecoration: 'none', paddingBottom: 10 }}
|
||||
>
|
||||
<MovieCard movie={item} config={config} />
|
||||
</Link>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export default Main;
|
||||
Loading…
Reference in New Issue
Block a user