如何避免切换筛选器时查询参数累加？（Inertia.js+React场景）

问题根源 #

你的问题出在筛选器变化时，默认的表单提交（或参数更新逻辑）会追加新参数到现有URL，而非替换原有参数。另外你的SelectInput组件存在字段名称不匹配的小问题，也会导致数据混乱。

解决步骤 #

1. 修正字段名称不匹配

你的SelectInput的name属性是filter[group.id]，但表单数据的key是filter[application_slug]，先修正为一致：

<SelectInput
  form="page-filters"
  name="filter[application_slug]" // 与表单数据key保持一致
  value={form.data['filter[application_slug]']}
  className="!h-10"
  onChange={e => {
    form.setData('filter[application_slug]', e.currentTarget.value);
  }}
>

2. 方案一：手动用Inertia.replace更新URL（推荐）

当筛选器变化时，构建完整的筛选参数，调用Inertia.replace直接替换现有URL的查询参数，避免追加：

首先导入Inertia：

import { Inertia } from '@inertiajs/react';

修改筛选器的onChange事件：

onChange={e => {
  const newValue = e.currentTarget.value;
  form.setData('filter[application_slug]', newValue);

  // 构建完整筛选参数，过滤空值避免无效参数
  const filterParams = {};
  if (form.data['filter[name]']) {
    filterParams['filter[name]'] = form.data['filter[name]'];
  }
  if (newValue) {
    filterParams['filter[application_slug]'] = newValue;
  }

  // 替换当前URL的查询参数，用路由名称确保路径正确
  Inertia.replace(route('admin.settings.groups.index', {}, { query: filterParams }));
}}

3. 方案二：表单提交时设置replace: true

如果筛选器在表单内，可以通过表单提交选项强制替换URL参数：

在父组件的表单中：

import { useForm } from '@inertiajs/react';

// ...

const filterForm = useForm<ApplicationSlugFilterFormProps>({
  'filter[name]': queryParameters.get('filter[name]') ?? '',
  'filter[application_slug]': queryParameters.get('filter[application_slug]') ?? '',
});

// ...

<form 
  id="page-filters"
  onSubmit={(e) => {
    e.preventDefault();
    // 用GET提交并设置replace: true，替换现有URL参数
    filterForm.get(route('admin.settings.groups.index'), {
      replace: true,
      preserveState: true, // 保留页面滚动位置等状态
    });
  }}
>
  <ApplicationFilterSlug applications={applications} form={filterForm} />
  {/* 其他筛选器组件 */}
</form>

然后修改筛选器的onChange，更新数据后自动提交表单：

onChange={e => {
  form.setData('filter[application_slug]', e.currentTarget.value);
  // 即时提交更新URL
  document.getElementById('page-filters')?.submit();
}}

原理说明 #

Inertia.js的replace方法会替换当前浏览器历史记录条目，并用新的查询参数覆盖原有URL；表单get方法配合replace: true选项，会用当前表单的完整数据构建查询参数，而非追加到现有参数后，从根源避免了参数重复累加。

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