如何使用 MUI 分页？

Question

我正在尝试根据分页中选择的内容相应地更改屏幕上显示的内容，但我不知道它是如何完成的，有人可以帮助我吗？

我正在使用的 Api 将使用页面参数更改它的值。

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;

Answer 1

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)} />
    </>
  );
}

如何使用 MUI 分页？

How can I use MUI pagination?

pagination

reactjs

material-ui