React+Node.js商品分类筛选异常：dailyEssentials与medical-care失效

核心原因 #

前端传递的查询参数名与后端期望的参数名不匹配，导致dailyEssentials和medical-care的过滤条件未生效，最终展示全部商品。

具体不匹配点 #

1. 日常必需品（dailyEssentials）：

   • 前端productAction.js中传递的参数名是essential
   • 后端代码中期望从req.query.dailyEssential获取分类ID，参数名不一致，导致后端无法获取有效ID，过滤条件为空。

2. 医疗护理（medical-care）：

   • 前端productAction.js中传递的参数名是medical
   • 后端代码中期望从req.query.medicalCare获取分类ID，参数名不匹配，过滤条件失效。

treatment分类能正常工作，是因为前端传递的参数名treatment和后端期望的req.query.treatment完全一致。

解决方案 #

修改productAction.js中的请求URL，将参数名调整为后端期望的名称：

export const getProduct = (pageNumber,keyword='',animal='',treatment='',essential='',medical='') => async (dispatch)=>
{
    try{
        dispatch({type:ALL_PRODUCT_REQUEST})

        // 修改参数名，与后端对齐
        let link = `/api/v1/products/?pageNumber=${pageNumber}&keyword=${keyword}&animal=${animal}&treatment=${treatment}&dailyEssential=${essential}&medicalCare=${medical}`;

        const {data} =  await axios.get(link)
        dispatch({
            type:ALL_PRODUCT_SUCCESS,
            payload:data,
        })

    }
    catch(error){
        dispatch({
            type: ALL_PRODUCT_FAIL,
            payload:error.response.data.message,
        })
    }
}

额外检查 #

同时建议确认MongoDB的Product模型中，对应分类的字段名是否为dailyEssential和medicalCare，确保后端过滤时使用的字段名与模型一致，避免因字段名不匹配导致的过滤失效。

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