分页从第二次点击开始工作

Question

我在分页方面遇到了这样一个问题：它只在第二次单击时切换到另一个页面。当我点击第2页时，它也会保留在第1页，并且只是从第二次切换到第2页开始。还有其他页面。我做了这样的分页组件：

const Paginator = ({
total,
startPage = 1,
limit = 2,
totalPages = null,
onMovePage = null,
}) => {
const [hovered, setHovered] = useState(false);
const handleEnter = () => {
setHovered(true);
};
const handleLeave = () => {
setHovered(false);
};
const style = hovered ? { left: "-230px" } : {};
const [currentPage, setCurrentPage] = useState(startPage);
function range(start, stop, step) {
if(typeof stop=='undefined'){/*one param defined*/stop=start;start=0}
if(typeof step=='undefined'){step=1}
if((step>0&&start>=stop)||(step<0&&start<=stop)){return[]}
let result=[];
for(let i=start;step>0?i<stop:i>stop;i+=step){result.push(i)}
return result;
};
return (
<>
...
{range(1, totalPages+1).map(p => (
<PagItem key={p} handleClick={ () => {setCurrentPage(p); onMovePage && onMovePage({currentPage})} } title={p} name={p} />
))}
...
</>
}

并将其用于软件组件：

const PER_PAGE = 2;
const Softwares = () => {
const [softwares, setSoftwares] = useState([]);
const [total, setTotal] = useState(null);
const [totalPages, setTotalPages] = useState(null);
const onFetchData = ({ currentPage }) => {
console.log('currentPage in onFetchData', currentPage)
fetch(`http://127.0.0.1:8000/api/software/?p=${currentPage}&per_page=${PER_PAGE}`)
.then(response => response.json())
.then(data => {
setSoftwares(data.results);
setTotal(data.count);
setTotalPages(data.total_pages);
})
}
useEffect(() => {
onFetchData({ currentPage: 1 })
}, []);
return (
<>
...
{softwares.map(s => (
<Article key={s.id} pathname={s.id} title={s.title} image={s.image} pubdate={s.pub_date} icon={s.category.parent.img} categoryID={s.category.id} categoryName={s.category.name} dCount={s.counter} content={s.content} />
))}
<Paginator totalPages={totalPages} total={total} onMovePage={onFetchData} limit={PER_PAGE} />
...
</>
);
};

那么，为什么会发生这种情况呢？

Answer 1

更改以下

<PagItem key={p} handleClick={ () => {setCurrentPage(p); onMovePage && onMovePage({currentPage})} } title={p} name={p} />

至

<PagItem key={p} handleClick={ () => {setCurrentPage(p); onMovePage && onMovePage({currentPage:p})} } title={p} name={p} />

因为您假设您的状态currentPage是在调用onMovePage时设置的，这不是真的。依靠p移动到page，而不是异步设置的状态。