React引入外部JSON文件后商品分类筛选按钮失效解决方案

分类筛选失效的核心原因是两侧分类值的格式、大小写完全不匹配，严格相等判断永远不成立：

• 组件内定义的筛选分类常量是首字母大写、空格分隔的格式，例如const ART = 'Art'、const ACCESSORIES = 'Accessories'
• JSON数据源中存储的商品category字段是全大写、下划线分隔的格式，例如"category": "ART"、"category": "DIGITAL_PHOTOGRAPHS"
• 过滤逻辑用的是严格全等匹配product.category === category，两边值不一致自然无法命中筛选规则，只有选择「All」时能正常返回全量商品。

二选一即可，推荐用方案1，改动量最小：

方案1：对齐组件侧的分类常量值 #

直接修改Shop组件顶部的分类常量定义，让常量值和JSON中存储的category值完全一致即可，按钮对外显示的文字不需要调整：

// 替换原有分类常量定义，和JSON字段值完全对齐
const HOME_GARDEN = 'HOME_AND_GARDEN'; // 注意当前JSON中暂无该分类下的商品，后续新增商品时category值要和该常量保持一致
const ART = 'ART';
const ACCESSORIES = 'ACCESSORIES';
const DIGITAL_PHOTOGRAPHS = 'DIGITAL_PHOTOGRAPHS';
const FASHION = 'FASHION';
const FOOTWEAR = 'FOOTWEAR';
const JEWELLERY = 'JEWELLERY';
const ALL = 'All';

方案2：对齐JSON侧的分类值 #

如果觉得全大写下划线的分类值可读性差，可以批量修改JSON文件中所有商品的category字段值，让其和组件内定义的常量完全对应，例如把"category": "ART"改为"category": "Art"，"category": "ACCESSORIES"改为"category": "Accessories"，所有值一一对应即可。

• 当前JSON中有两个商品的id均为0005，会导致后续商品详情页路由跳转异常，建议将Jewellery分类下的项链商品id修改为0006
• 可以给过滤逻辑增加大小写容错，避免后续因格式写错导致筛选失效，修改后的过滤逻辑如下：

const getProductsInCategory = () => {
if (category === ALL) {
    return products;
} else {
    // 统一转成小写后再匹配，兼容大小写差异
    return products.filter((product) => product.category.toLowerCase() === category.toLowerCase());
}
};

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