Admin on Rest中如何在CRUD操作间保留kind查询参数

我之前也碰到过类似的React Admin场景——用同一个资源页面配合查询参数区分不同类别，确实会遇到这些麻烦。咱们逐个解决这三个问题：

1. 自定义所有操作按钮过于繁琐，有没有更简洁的方案？ #

自定义每个按钮确实是重复劳动，咱们可以通过封装复用的按钮组件来简化，这种方式直观且易维护：

方案：封装自动携带查询参数的基础按钮 #

基于React Admin的原生按钮，封装一个能自动从当前URL获取kind参数并拼接的组件，所有需要的按钮都能复用这个逻辑：

import { CreateButton, EditButton, useLocation, useRouteMatch } from 'react-admin';
import { stringify, parse } from 'query-string';

// 封装自动带kind参数的CreateButton
const KindAwareCreateButton = (props) => {
  const location = useLocation();
  const { basePath } = useRouteMatch();
  const { kind } = parse(location.search);
  
  // 拼接带kind参数的跳转路径
  const to = `${basePath}/create?${stringify({ kind: kind || '' })}`;
  return <CreateButton to={to} {...props} />;
};

// 同理封装EditButton（针对单条记录）
const KindAwareEditButton = (props) => {
  const location = useLocation();
  const { kind } = parse(location.search);
  const to = `${props.basePath}/${props.record.id}?${stringify({ kind: kind || '' })}`;
  return <EditButton to={to} {...props} />;
};

之后在List的actions里直接使用这些封装好的按钮即可，不用再重复写查询参数拼接逻辑。如果有更多按钮需要处理，用同样的方式封装一次就够了。

2. SaveButton/DeleteButton跳转时如何自动添加查询参数？ #

原生的handleSubmitWithRedirect确实只接收视图名称，没法直接携带查询参数，咱们可以自定义提交/删除后的跳转逻辑，摆脱对默认回调的依赖：

针对SaveButton（Create/Edit页面） #

在Create或Edit组件里，手动处理提交成功后的跳转，带上当前的kind参数：

import { Create, SimpleForm, SaveButton, useRedirect, useLocation } from 'react-admin';
import { parse } from 'query-string';

const AssetCreate = (props) => {
  const redirect = useRedirect();
  const location = useLocation();
  const { kind } = parse(location.search);

  // 自定义提交处理函数
  const handleCustomSubmit = (values) => {
    return props.save(values)
      .then(() => {
        // 跳转到带kind参数的列表页
        redirect('list', props.resource, undefined, { 
          search: `?kind=${kind || ''}&page=1&perPage=25` 
        });
      })
      .catch(err => { throw err; }); // 保留错误处理
  };

  return (
    <Create {...props}>
      <SimpleForm handleSubmit={handleCustomSubmit}>
        {/* 你的表单字段 */}
        <SaveButton label="Save Asset" />
      </SimpleForm>
    </Create>
  );
};

针对DeleteButton #

同样在Delete组件里自定义删除后的跳转逻辑：

import { Delete, useRedirect, useLocation } from 'react-admin';
import { parse } from 'query-string';

const AssetDelete = (props) => {
  const redirect = useRedirect();
  const location = useLocation();
  const { kind } = parse(location.search);

  const handleCustomDelete = (data) => {
    return props.delete(data.id)
      .then(() => {
        redirect('list', props.resource, undefined, { 
          search: `?kind=${kind || ''}&page=1&perPage=25` 
        });
      })
      .catch(err => { throw err; });
  };

  return <Delete {...props} onDelete={handleCustomDelete} />;
};

这样就彻底告别setTimeout这种不规范的写法了。

3. 分页出现“NaN-NaN from 19”的异常原因及解决 #

这个问题的核心是分页参数不匹配或者数据总数(total)异常，咱们一步步排查解决：

可能的原因： #

1. List组件的perPage与URL中的perPage不一致：你代码里List的perPage设为15，但菜单项的查询参数里是perPage=25，导致分页计算矛盾（比如total=19时，组件用15计算分页，API用25返回数据，就会出现NaN）。
2. parsedKind为空时，filter={{cat_id: dbIds[parsedKind]}}返回无效值：如果dbIds['']是undefined，API可能返回错误的total（比如0），但实际有19条数据，导致分页计算错误。
3. API返回的total不是有效数字：比如API返回的total是字符串、undefined，React Admin的分页组件无法解析就会显示NaN。

解决方案： #

1. 统一分页参数：从URL中解析perPage，传给List组件，确保参数一致：

   import { parse } from 'query-string';
   
   const parsed = parse(props.location.search);
   const perPage = parseInt(parsed.perPage) || 25; // 优先用URL参数，默认25
   
   // 然后在List里：
   <List 
     perPage={perPage}
     filter={{cat_id: dbIds[parsedKind] || '默认类别ID'}} // 加默认值避免无效filter
     key={parsedKind}
     {...props}
   >
   

2. 确保filter的cat_id始终有效：当parsedKind为空时，给cat_id设置一个默认值（比如所有类别的ID或者根类别ID），避免API返回异常数据。
3. 检查API返回格式：确保API返回的响应包含正确的total数字字段，比如：

   {
     "data": [...],
     "total": 19
   }
   

这样分页计算就能正常工作了。

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