簡體   English   中英

Ant 設計表表分頁與反應查詢

[英]Ant design Table table pagination with react query

我正在嘗試使用反應查詢在我的表(螞蟻設計表組件)上添加分頁以獲取數據,但有時它在從第 1 頁到第 2 頁時有效,但在到達最后一頁或更改頁面大小時無法正常工作我不知道為什么。 這是結果 這是我的代碼。

    const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
}); //pagination state

const fetchWaitlist = (page, pageSize) => {
    return axios.get(API_URL + `tickets/waitlist?page=${page}&pageSize=${pageSize}&source=` + defaultAgency)

} //fetcher function

const {data: waitlist, refetch: refecthWaitList, isLoading} = useQuery(["waitlist", pagination.current, pagination.pageSize], () => fetchWaitlist(pagination.current, pagination.pageSize), {
    onSuccess: (data) => {
        setFilteredData(data?.data.content);
        setPagination({
            ...pagination, total: data?.data.totalElements
        }); // useQuery Hook

useEffect(() => {
    setFilteredUserData(users?.data.content);
}, [users]); //state to perform search over the table

        {!isLoading ? <Table
            components={components}//Add new Custom Cell and Row
            pagination={{
                ...pagination, showSizeChanger: true, onChange: (page, pageSize) => {
                    setPagination({current: page, pageSize: pageSize})
                }
            }}
            columns={columns} rowClassName="waitlist-table_row--shadow" rowSelection={rowSelection} rowKey="id"
            dataSource={filteredData} className="all-tickets_table" scroll={{x: "true"}}/> : <CustomLoader/>} //Table component

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM