分页问题，有一次我迷路了

Question

我试图对rickandmortyapi.com的页面进行分页，但遇到了问题。

我用axios调用api：

// get all characters
export const getCharacters = async () => {
let response = await Axios.get(`https://rickandmortyapi.com/api/character/`)
return response.data
}

有了这个请求，我可以绘制并显示角色。

为了分页，我创建了一个名为Pagination的组件，但在更改getCharacters函数的响应和插入时遇到了问题？在端点的末尾，page=2。

寻呼组件：

import React, { useState, useEffect } from 'react'
import { getCharacters } from '../../API'
const Pagination = () => {
// use state to keep track of the current page
const [pagination, setPagination] = useState([])
// use effect to fetch the characters
useEffect(() => {
// async function
async function getPages() {
const responsePages = await getCharacters()
setPagination(responsePages)
return responsePages
}
// call the function
getPages()
}, [])
console.log(pagination)
return (
// pagination
<div>
<button
onClick={() => {
// I dont know what to do with this
}}
>
Next
</button>
</div>
)
}
export default Pagination

更新：

我做了另一个api调用：

// paginate characters
export const getCharactersPaginated = async (page) => {
let response = await Axios.get(
`https://rickandmortyapi.com/api/character/?page=${page}`
)
return response.data
}

我不知道如何在我的分页组件中使用它。

Answer 1

export const getCharacters = async (page = 1) => {
let response = await Axios.get(`https://rickandmortyapi.com/api/character/?page=${page}`)
return response.data
}

const [currentPage, setCurrentPage] = useState(1); 
useEffect(() => {
const responsePages = await getCharacters(page); 
setPagination(responsePages); 
}, [currentPage]); 

单击即可更改当前页面。

还可以处理一些边缘案例。

Answer 2

已解决。

import React, { useState, useEffect } from 'react'
import axios from 'axios'
const Pagination = ({ setCharacters, setIsLoading }) => {
const [info, setInfo] = useState(1)
const fetchCharacters = async (pageNumber) => {
setIsLoading(true)
let baseUrl = 'https://rickandmortyapi.com/api/character'
if (pageNumber) {
baseUrl += `/?page=${pageNumber}`
}
const result = await axios(baseUrl)
const pageInfo = result.data.info
setInfo({
next: pageNumber < pageInfo.pages ? pageNumber + 1 : null,
current: pageNumber,
prev: pageNumber > 1 ? pageNumber - 1 : null,
})
setCharacters(result.data.results)
setIsLoading(false)
}
useEffect(() => {
fetchCharacters(1)
}, [])
return (
<div className='pagination'>
{info.prev ? (
<button type='button' onClick={() => fetchCharacters(info.prev)}>
{info.prev}
</button>
) : (
<React.Fragment />
)}
<button type='button'>{info.current}</button>
{info.next ? (
<button type='button' onClick={() => fetchCharacters(info.next)}>
{info.next}
</button>
) : (
<React.Fragment />
)}
</div>
)
}
export default Pagination