🐛 fix(redemptions-table): correct initial page index and pagination state
Summary: The redemption list occasionally displayed an invalid range such as “Items -9 - 0” and failed to highlight page 1 after a refresh. This was caused by the table being initialized with `currentPage = 0`. Changes: • update `useEffect` to load data starting from page 1 instead of page 0 • refactor `loadRedemptions` to accept `page` (default 1) and sanitize backend‐returned pages (`<= 0` coerced to 1) • keep other logic unchanged Impact: Pagination text and page selection now show correct values on first load or refresh, eliminating negative ranges and ensuring the first page is properly highlighted.
This commit is contained in:
@@ -270,15 +270,12 @@ const RedemptionsTable = () => {
|
|||||||
const [showEdit, setShowEdit] = useState(false);
|
const [showEdit, setShowEdit] = useState(false);
|
||||||
const [compactMode, setCompactMode] = useTableCompactMode('redemptions');
|
const [compactMode, setCompactMode] = useTableCompactMode('redemptions');
|
||||||
|
|
||||||
// Form 初始值
|
|
||||||
const formInitValues = {
|
const formInitValues = {
|
||||||
searchKeyword: '',
|
searchKeyword: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
// Form API 引用
|
|
||||||
const [formApi, setFormApi] = useState(null);
|
const [formApi, setFormApi] = useState(null);
|
||||||
|
|
||||||
// 获取表单值的辅助函数
|
|
||||||
const getFormValues = () => {
|
const getFormValues = () => {
|
||||||
const formValues = formApi ? formApi.getValues() : {};
|
const formValues = formApi ? formApi.getValues() : {};
|
||||||
return {
|
return {
|
||||||
@@ -299,15 +296,15 @@ const RedemptionsTable = () => {
|
|||||||
setRedemptions(redeptions);
|
setRedemptions(redeptions);
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadRedemptions = async (startIdx, pageSize) => {
|
const loadRedemptions = async (page = 1, pageSize) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
const res = await API.get(
|
const res = await API.get(
|
||||||
`/api/redemption/?p=${startIdx}&page_size=${pageSize}`,
|
`/api/redemption/?p=${page}&page_size=${pageSize}`,
|
||||||
);
|
);
|
||||||
const { success, message, data } = res.data;
|
const { success, message, data } = res.data;
|
||||||
if (success) {
|
if (success) {
|
||||||
const newPageData = data.items;
|
const newPageData = data.items;
|
||||||
setActivePage(data.page);
|
setActivePage(data.page <= 0 ? 1 : data.page);
|
||||||
setTokenCount(data.total);
|
setTokenCount(data.total);
|
||||||
setRedemptionFormat(newPageData);
|
setRedemptionFormat(newPageData);
|
||||||
} else {
|
} else {
|
||||||
@@ -340,17 +337,8 @@ const RedemptionsTable = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onPaginationChange = (e, { activePage }) => {
|
|
||||||
(async () => {
|
|
||||||
if (activePage === Math.ceil(redemptions.length / pageSize) + 1) {
|
|
||||||
await loadRedemptions(activePage - 1, pageSize);
|
|
||||||
}
|
|
||||||
setActivePage(activePage);
|
|
||||||
})();
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadRedemptions(0, pageSize)
|
loadRedemptions(1, pageSize)
|
||||||
.then()
|
.then()
|
||||||
.catch((reason) => {
|
.catch((reason) => {
|
||||||
showError(reason);
|
showError(reason);
|
||||||
@@ -421,20 +409,6 @@ const RedemptionsTable = () => {
|
|||||||
setSearching(false);
|
setSearching(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
const sortRedemption = (key) => {
|
|
||||||
if (redemptions.length === 0) return;
|
|
||||||
setLoading(true);
|
|
||||||
let sortedRedemptions = [...redemptions];
|
|
||||||
sortedRedemptions.sort((a, b) => {
|
|
||||||
return ('' + a[key]).localeCompare(b[key]);
|
|
||||||
});
|
|
||||||
if (sortedRedemptions[0].id === redemptions[0].id) {
|
|
||||||
sortedRedemptions.reverse();
|
|
||||||
}
|
|
||||||
setRedemptions(sortedRedemptions);
|
|
||||||
setLoading(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePageChange = (page) => {
|
const handlePageChange = (page) => {
|
||||||
setActivePage(page);
|
setActivePage(page);
|
||||||
const { searchKeyword } = getFormValues();
|
const { searchKeyword } = getFormValues();
|
||||||
|
|||||||
Reference in New Issue
Block a user