MERN栈Redux电商项目价格筛选商品功能失效返回400错误求助

Postman调用接口正常已经排除后端逻辑故障，问题100%出在前端请求参数处理环节，按以下顺序排查即可：

1. 检查组件传参逻辑 #

首先确认Products.jsx中调用getProducts时传入的价格参数值不为空：

• 排查价格区间状态的绑定是否正确，是否存在变量名写错、取值时机不对的问题，比如在价格还没被用户选中时就提前调用了接口
• 正确传参示例：

// 调用前先判断参数存在
const { minPrice, maxPrice } = priceState
if (minPrice && maxPrice) {
  getProducts({
    keyword: searchKey,
    price: {
      gt: minPrice,
      lt: maxPrice
    }
  })
}

2. 检查Action层的参数序列化 #

这是最高发的故障点：GET请求默认不会把嵌套对象自动序列化为后端能识别的price[gt]=xxx格式，需要手动配置：

如果你使用Axios发请求 #

安装qs库处理参数序列化，修改productAction中的请求代码：

import qs from 'qs'
import axios from 'axios'

export const getProducts = (filters) => async (dispatch) => {
  try {
    dispatch({ type: 'PRODUCT_LIST_REQUEST' })
    // 关键配置：paramsSerializer将嵌套对象转为后端可识别的查询字符串
    const { data } = await axios.get('/api/v1/products', {
      params: filters,
      paramsSerializer: (params) => qs.stringify(params, { encodeValuesOnly: true })
    })
    dispatch({ type: 'PRODUCT_LIST_SUCCESS', payload: data })
  } catch (error) {
    dispatch({
      type: 'PRODUCT_LIST_FAIL',
      payload: error.response?.data?.message || error.message
    })
  }
}

如果你使用原生Fetch发请求 #

手动拼接URLSearchParams：

export const getProducts = (filters) => async (dispatch) => {
  try {
    dispatch({ type: 'PRODUCT_LIST_REQUEST' })
    const params = new URLSearchParams()
    if (filters.keyword) params.append('keyword', filters.keyword)
    if (filters.price?.gt) params.append('price[gt]', filters.price.gt)
    if (filters.price?.lt) params.append('price[lt]', filters.price.lt)
    
    const res = await fetch(`/api/v1/products?${params.toString()}`)
    const data = await res.json()
    dispatch({ type: 'PRODUCT_LIST_SUCCESS', payload: data })
  } catch (error) {
    dispatch({
      type: 'PRODUCT_LIST_FAIL',
      payload: error.response?.data?.message || error.message
    })
  }
}

3. 快速验证方法 #

打开浏览器开发者工具的「网络」标签，找到发出的产品列表GET请求，查看请求URL的查询参数部分：

• 如果没有price[gt]、price[lt]参数，或者参数值为undefined，确认是前端传参/序列化问题
• 如果参数正常存在，再检查后端ApiFeatures类的价格过滤逻辑，是否存在字段名拼写错误，比如把req.query.price.gt错写为req.query.gt

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