如何将API返回的meta.links数据传入React Mobx+MUI Pagination组件？

核心适配思路 #

MUI Pagination组件可通过API返回的分页元数据直接配置，无需直接遍历meta.links；若需严格复用meta.links内的状态，也可通过自定义渲染实现。

步骤1：Mobx存储分页元数据 #

先在Mobx Store中保存API返回的meta数据，确保状态可全局监听：

import { makeAutoObservable } from "mobx";

class PaginationStore {
  meta = null;

  constructor() {
    makeAutoObservable(this);
  }

  setPaginationMeta(metaData) {
    this.meta = metaData;
  }
}

export const paginationStore = new PaginationStore();

步骤2：对接MUI Pagination组件 #

方式一：直接使用核心元数据（推荐） #

利用meta.current_page、meta.last_page等字段快速配置组件，逻辑更简洁：

import { observer } from "mobx-react-lite";
import { Stack, Pagination, PaginationItem } from "@mui/material";
import { paginationStore } from "./stores/PaginationStore";
import LeftNewIcons from "./icons/LeftNewIcons";
import RightNewIcons from "./icons/RightNewIcons";

const PaginationComponent = observer(() => {
  const { meta } = paginationStore;
  if (!meta) return null;

  const handlePageChange = (event, targetPage) => {
    // 此处调用API获取目标页码数据，并更新Store中的meta
    // 示例：api.getPackageLists({ page: targetPage }).then(res => paginationStore.setPaginationMeta(res.meta))
    console.log("切换至页码：", targetPage);
  };

  return (
    <Stack spacing={2}>
      <Pagination
        count={meta.last_page}
        page={meta.current_page}
        onChange={handlePageChange}
        renderItem={(item) => (
          <PaginationItem
            slots={{ previous: LeftNewIcons, next: RightNewIcons }}
            {...item}
          />
        )}
      />
    </Stack>
  );
});

export default PaginationComponent;

方式二：基于meta.links自定义渲染（适配特殊需求） #

若需严格遵循meta.links内的标签、禁用状态等配置，可通过renderItem匹配对应项：

import { observer } from "mobx-react-lite";
import { Stack, Pagination, PaginationItem } from "@mui/material";
import { paginationStore } from "./stores/PaginationStore";
import LeftNewIcons from "./icons/LeftNewIcons";
import RightNewIcons from "./icons/RightNewIcons";

const PaginationComponent = observer(() => {
  const { meta } = paginationStore;
  if (!meta) return null;

  const handlePageChange = (pageUrl) => {
    if (!pageUrl) return;
    const targetPage = new URL(pageUrl).searchParams.get("page");
    // 调用API更新数据及分页元数据
    console.log("切换至页码：", targetPage);
  };

  return (
    <Stack spacing={2}>
      <Pagination
        count={meta.last_page}
        page={meta.current_page}
        renderItem={(item) => {
          // 匹配meta.links中对应的分页项
          const matchedLink = meta.links.find(link => 
            (item.type === 'previous' && link.label === 'pagination.previous') ||
            (item.type === 'next' && link.label === 'pagination.next') ||
            (item.type === 'page' && link.label === String(item.page))
          );
          if (!matchedLink) return null;

          return (
            <PaginationItem
              slots={{ previous: LeftNewIcons, next: RightNewIcons }}
              {...item}
              disabled={!matchedLink.url}
              onClick={() => handlePageChange(matchedLink.url)}
              selected={matchedLink.active}
            />
          );
        }}
      />
    </Stack>
  );
});

export default PaginationComponent;

关键说明 #

• 使用observer监听Mobx Store中meta的变化，实现组件自动更新
• 优先选择方式一，MUI Pagination已封装成熟的分页逻辑，无需重复处理links数组
• 若需国际化pagination.previous/pagination.next标签，可在renderItem中替换对应文本

内容的提问来源于stack exchange，提问作者Shahzodjon