React向后端传查询参数时category等参数未定义的问题求助

核心排查思路 #

先抓关键：确认请求URL里是否实际携带了category、brand、rating参数——打开浏览器DevTools的Network面板，找到/api/products的请求，查看请求URL的查询参数部分。这一步能直接定位问题出在前端还是后端。

情况1：URL里没有category/brand/rating参数 → 前端问题 #

排查点1：useNavigate跳转时的参数拼接逻辑

检查跳转代码是否正确将参数添加到URL：

• 错误示例1：参数名拼写错误（比如把category写成categroy）

// 错误：参数名拼写错误，后端req.query.category自然拿不到
navigate(`/products?keyword=${keyword}&categroy=${category}&brand=${brand}`);

• 错误示例2：参数值为undefined/空，导致URLSearchParams忽略该参数

const category = undefined; // 未正确获取选中的分类值
const params = new URLSearchParams();
params.append('keyword', keyword);
params.append('category', category); // 因为category是undefined，这一行不会生效
navigate(`/products?${params.toString()}`);

• 正确写法：用URLSearchParams统一处理，确保参数值存在时才添加

const params = new URLSearchParams();
if (keyword) params.append('keyword', keyword);
if (category) params.append('category', category);
if (brand) params.append('brand', brand);
if (rating) params.append('rating', rating);
navigate(`/products?${params.toString()}`);

排查点2：RTK Query的接口定义是否遗漏参数

检查getProducts的endpoint是否完整传递了所有参数：

• 错误示例：仅传递了keyword，未包含其他参数

// 错误：query函数只接收keyword，没处理category/brand/rating
getProducts: builder.query({
  query: (keyword) => ({
    url: '/api/products',
    params: { keyword },
  }),
}),

• 正确写法：接收包含所有参数的对象，并完整传递

getProducts: builder.query({
  query: (filters) => ({
    url: '/api/products',
    params: {
      keyword: filters.keyword,
      category: filters.category,
      brand: filters.brand,
      rating: filters.rating,
    },
  }),
}),

同时确认调用接口时传递了完整的参数对象：

// 调用时要传入所有需要的参数，不能只传keyword
const { data } = useGetProductsQuery({ keyword, category, brand, rating });

情况2：URL里有category/brand/rating参数 → 后端问题 #

排查点1：参数名是否完全匹配

后端的req.query参数名必须和前端传递的完全一致（大小写敏感）：

• 比如前端传的是rating，后端不能写成rate；前端传Category，后端不能用req.query.category

排查点2：是否有中间件干扰req.query

检查后端是否有自定义中间件修改了req.query，比如某些格式化中间件可能会过滤或重命名参数。另外，确认没有误将req.query和req.body混淆（比如后端错误地从req.body取参数，而不是req.query）。

快速验证方法 #

直接在浏览器地址栏手动拼接参数请求后端：

http://your-domain/api/products?keyword=test&category=electronics&brand=apple&rating=4

然后看后端控制台输出的req.query——如果能拿到所有参数，说明前端传递逻辑有问题；如果还是拿不到，说明后端接收逻辑有问题。

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