如何在React.JS中使用多值条件过滤嵌套JSON数据

问题背景 #

需要根据District、Ward No、Categories三个下拉框的选中值，过滤嵌套JSON数据，将选中分类对应的数组条目展示到表格中。预期界面效果如下：

原有代码核心错误 #

• 定义的wardNo是嵌套数组结构，直接和字符串类型的查询值做全等判断，永远返回false
• JSON结构中不存在types字段，categorySelected取值逻辑本身会抛出undefined错误
• 分类字段名是全小写的grievance/general/urgent/services，查询时用的首字母大写Grievances和实际字段名不匹配
• 过滤逻辑没有对嵌套的ward_no数组做遍历匹配，无法命中目标数据

正确实现代码 #

const Screen = () => {
  // 下拉查询条件，实际开发中替换为下拉组件的动态取值
  const query = {                            
    district : "Kolkata",
    ward : "6",
    category : "Grievances"
  };

  // 下拉显示值到JSON实际字段的映射，解决大小写、命名不一致问题
  const categoryMap = {
    "Grievances": "grievance",
    "General": "general",
    "Urgent": "urgent",
    "Services": "services"
  }
  const realCategory = categoryMap[query.category];
  let tableData = [];

  // 第一层：匹配选中的行政区
  const targetDistrict = dummyData.find(item => item.district === query.district);
  if (targetDistrict) {
    // 第二层：匹配选中的 Ward
    const targetWard = targetDistrict.ward_no.find(wardItem => wardItem.ward === query.ward);
    if (targetWard) {
      // 第三层：取出对应分类的数组作为表格渲染数据
      tableData = targetWard[realCategory] || [];
    }
  }

  // 输出验证，tableData可直接传入表格组件渲染
  console.log('过滤后表格数据：', tableData);
  console.log('数据条目数：', tableData.length);
       
  return(
    <div>
      {/* 表格组件直接绑定tableData即可完成渲染 */}
    </div>
  );
}

附JSON结构参考 #

[
    {
        "district": "Kolkata",
        "ward_no": [
            {
                "ward": "6",     
                "grievance": [
                    {
                        "serial_number": "0001",
                        "name": "Siddhartha Chatterjee"
                    },
                    {
                        "serial_number": "0002",
                        "name": "Sajujjo Ghosh"
                    }
                ],
                "general": [
                    {
                        "serial_number": "0003",
                        "name": "Dr. Partha Pratim Paul"
                    },
                    {
                        "serial_number": "0004",
                        "name": "Dr. Partha Pratim Paul"
                    }
                ],
                "urgent": [
                    {
                        "serial_number": "0005",
                        "name": "Ritwick Banerjee"
                    },
                    {
                        "serial_number": "0006",
                        "name": "Soumadip Banerjee"
                    }
                ],
                "services": [
                    {
                        "serial_number": "0007",
                        "name": "Tanajeet Biswas"
                    },
                    {
                        "serial_number": "0008",
                        "name": "Durba Chatterjee"
                    }
                ]
            }
        ]
    }
]

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