React级联下拉map遍历子分类显示全量项问题排查

子分类下拉未基于当前选中的主分类做数据过滤，直接遍历全量categories数组，把所有主分类下的子分类全部渲染了。另外代码存在3个不规范点：

• 子分类select的id与主分类重复，均为category，违反HTML id唯一性规则，会导致label关联、辅助功能失效
• 渲染主分类option时，map回调的参数名与外层状态category重名，易引发作用域混淆
• select使用defaultValue而非受控的value绑定状态，易出现视图与状态不同步的问题

1. 主分类选中变化时，先匹配到当前选中的主分类数据对象
2. 子分类下拉仅遍历当前选中主分类下的subCategories字段，不遍历全量分类数据
3. 修正重复id、变量重名问题，将select改为标准受控组件，切换主分类时清空已选的子分类值，避免残留无效选项；主分类未选中时禁用子分类下拉，减少无效操作

状态定义：

const [category, setCategory] = useState("");
const [subCategory, setSubCategory] = useState("");

分类选择模块代码：

<div className="inner--form--row">
    <label htmlFor="category">Category:</label>
    <select 
      id="category" 
      onChange={(e) => {
        setCategory(e.target.value);
        // 切换主分类时重置子分类选中值
        setSubCategory("");
      }}
      value={category}
    >
      <option value="" disabled>Choose...</option>
      {categories.map((catItem) => (
        <option value={catItem.label} key={catItem.id}>
          {catItem.label}
        </option>
      ))}
    </select>
</div>
<div className="inner--form--row">
    <label htmlFor="subCategory">Sub Category:</label>
    <select 
      id="subCategory" 
      onChange={(e) => setSubCategory(e.target.value)}
      value={subCategory}
      disabled={!category}
    >
      <option value="" disabled>Choose...</option>
      {(() => {
        const activeCategory = categories.find(item => item.label === category);
        if (!activeCategory) return null;
        return activeCategory.subCategories.map((subCat) => (
          <option value={subCat.label} key={subCat.id}>
            {subCat.label}
          </option>
        ))
      })()}
    </select>
</div>

你的分类数据存在三级嵌套结构（子分类下还有Junior/Mid/Senior层级），后续实现三级分类联动时逻辑完全一致：选中二级分类后匹配到对应的二级分类对象，遍历其下的subCategories渲染三级选项即可。

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