Inertia.js React 中实现无表单 GET 请求的最佳实践

问题背景

在使用 Inertia.js 的 React 版本时，开发者经常会遇到需要在不使用表单的情况下发送 GET 请求的场景。一个典型例子是通过下拉选择框(select)触发页面导航，同时传递查询参数。

常见误区

许多开发者会本能地想到使用 Inertia.js 的 useForm 钩子来处理这类交互，但这种方法并不适合简单的 GET 请求场景。useForm 主要设计用于处理表单提交，特别是 POST/PUT/PATCH/DELETE 等需要处理数据持久化的操作。

推荐解决方案

Inertia.js 提供了更简单直接的方式来处理这类需求。通过直接使用 router 对象，可以在选择框的 onChange 事件中直接触发页面导航：

<select 
  value={props.filters.order_by} 
  onChange={(e) => router.get("/page", { order_by: e.target.value })}
>
  <option value="asc">升序</option>
  <option value="desc">降序</option>
</select>

技术原理

这种方法利用了 Inertia.js 的核心路由功能，具有以下优势：

1. 简洁性：无需维护额外的表单状态
2. 即时性：选择值变化时立即触发导航
3. 符合 REST 规范：使用 GET 方法获取数据
4. URL 可共享：参数直接体现在 URL 中，便于分享和书签

进阶应用

对于更复杂的场景，比如需要合并现有查询参数的情况，可以这样处理：

<select
  value={props.filters.category}
  onChange={(e) => router.get("/page", {
    ...props.filters,
    category: e.target.value
  })}
>
  {/* 选项 */}
</select>

性能考虑

虽然这种方法简单直接，但在处理频繁变化的选项时（如实时搜索），建议添加防抖(debounce)机制以避免过多请求：

import { debounce } from 'lodash';

const handleChange = debounce((value) => {
  router.get("/page", { search: value });
}, 300);

<select onChange={(e) => handleChange(e.target.value)}>
  {/* 选项 */}
</select>

总结

Inertia.js 提供了灵活的方式来处理各种导航需求。对于简单的 GET 请求场景，直接使用 router.get() 是最简洁高效的解决方案，避免了不必要的状态管理和表单处理开销。开发者应根据具体场景选择最合适的方法，保持代码的简洁性和可维护性。