我正在嘗試根據分頁中選擇的內容相應地更改螢屏上顯示的內容，但我不知道它是如何完成的，有人可以幫我嗎？
我正在使用的 Api 將使用 page 引數更改它的值。
App 檔案如下，它是專案中唯一的檔案，這是我創建的一個小專案，只是為了弄清楚分頁應該如何作業：
import { Typography, Box, Pagination } from "@mui/material";
import axios from "axios";
import { useEffect, useState } from "react";
interface api {
name: string;
}
function App() {
//pageApi
const [pageApi, setPageApi] = useState(1);
//API
const [api, setApi] = useState([] as any[]);
const ApiAddress = axios.create({
baseURL: "https://swapi.dev/api/people",
});
useEffect(() => {
ApiAddress.get("?page=" pageApi)
.then((response: any) => setApi(response.data.results))
.catch((err: any) => console.log(err));
}, []);
return (
<>
<Typography>App</Typography>
<br />
{api.map((apiElement) => (
<Box key={apiElement.name}>{apiElement.name}</Box>
))}
<br />
<br />
<Pagination count={10} />
</>
);
}
export default App;
uj5u.com熱心網友回復：
function App() {
//pageApi
const [pageApi, setPageApi] = useState(1);
//API
const [api, setApi] = useState([] as any[]);
const ApiAddress = axios.create({
baseURL: "https://swapi.dev/api/people"
});
useEffect(() => {
ApiAddress.get("?page=" pageApi)
.then((response: any) => setApi(response.data.results))
.catch((err: any) => console.log(err));
}, [pageApi]);
return (
<>
<Typography>App</Typography>
<br />
{api.map((apiElement) => (
<Box key={apiElement.name}>{apiElement.name}</Box>
))}
<br />
<br />
<Pagination count={10} onChange={(e, value) => setPageApi(value)} />
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/449301.html
上一篇：不執行useEffect()錯誤TypeError:Cannotreadpropertiesofundefined(reading'toString')