React使用fetch请求本地Express服务器返回数据缺失pros/cons子数组

问题核心原因 #

1. ID类型不匹配导致筛选失败 #

你在chooseCat函数中用===恒等判断匹配分类ID：

• 后端返回的ID存在两种类型：前3条为数字类型（1/2/3），第4条为字符串类型
• 表单select控件的e.target.value默认是字符串类型
• 数字1和字符串"1"用===判断返回false，会筛选不到对应的分类对象，自然无法读取pros、cons字段

2. 数组处理逻辑不符合数据格式 #

返回数据中的pros、cons存在两种不一致的格式：

• 第一种：多元素数组（比如Restaurant的pros是4个独立字符串组成的数组）
• 第二种：单元素数组，元素为逗号拼接的长字符串（比如Music Venue的pros只有1个元素，内容是逗号分隔的多个值）
  你统一用selectedCat.pros[0].split(',')处理，第一种格式会只取第一个元素拆分，丢失其余数据。

解决方法 #

第一步：修复ID匹配逻辑 #

把恒等判断改成宽松相等，或者统一转成字符串后再判断：

// 方法1：用宽松相等自动适配类型
const selectedCat = categories.filter((cat) => cat.id == id)[0];
// 方法2：统一转字符串后再做恒等判断，逻辑更严谨
const selectedCat = categories.filter((cat) => String(cat.id) === id)[0];

第二步：兼容两种数组格式 #

修改pros、cons的处理逻辑，适配两种数据格式：

if(selectedCat){
  // 处理pros：数组长度>1直接用，否则拆分第一个元素并去除空格
  const selectedPros = selectedCat.pros.length > 1 
    ? selectedCat.pros 
    : selectedCat.pros[0].split(',').map(item => item.trim());
  // 处理cons逻辑同上
  const selectedCons = selectedCat.cons.length > 1 
    ? selectedCat.cons 
    : selectedCat.cons[0].split(',').map(item => item.trim());
  setCatState(selectedCat);
  setCatPros(selectedPros);
  setCatCons(selectedCons);
};

第三步（推荐）：统一后端返回格式 #

避免前端做兼容，直接在Express接口中统一处理pros、cons的格式，要么都返回拆分好的多元素数组，要么都返回逗号拼接的字符串，从根源避免格式混乱。

额外排查建议 #

如果修改后还有问题，可以补充提供以下代码协助排查：

• Express接口的路由处理、数据查询逻辑代码
• Select组件的代码，确认option的value绑定是否正确
• React代理配置的代码

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