Material UI Autocomplete联动异常：切换分类后子分类值未清空

核心问题原因 #

切换分类后，旧的子分类选中值虽被设为undefined，但Material UI Autocomplete默认的选项匹配逻辑（按对象引用比较）无法识别旧值已不在新选项列表中，再加上受控组件状态绑定不严谨，导致界面未同步更新。

具体解决步骤 #

• 严格绑定受控状态
  子分类Autocomplete必须通过value属性直接绑定状态变量，禁止依赖组件内部状态：

  <Autocomplete
    value={selectedSubcategory}
    onChange={(event, newValue) => setSelectedSubcategory(newValue)}
    // 其他配置...
  />
  

• 分类切换时强制清空子分类状态
  可以在分类的onChange回调里直接重置，也可以用useEffect监听分类变化自动处理：

  // 方式1：分类onChange内处理
  const handleCategoryChange = (event, newCategory) => {
    setSelectedCategory(newCategory);
    setSelectedSubcategory(null);
    setSubcategoryOptions(newCategory?.subcategories || []);
  };
  
  // 方式2：useEffect监听分类变化
  useEffect(() => {
    setSelectedSubcategory(null);
    setSubcategoryOptions(selectedCategory?.subcategories || []);
  }, [selectedCategory]);
  

• 配置isOptionEqualToValue（关键）
  自定义选项匹配逻辑，用唯一ID替代默认的对象引用比较，让组件能正确识别旧值已失效：

  <Autocomplete
    // 其他配置...
    isOptionEqualToValue={(option, value) => option.id === value?.id}
  />
  

完整示例代码 #

import { useState, useEffect } from 'react';
import { Autocomplete, TextField } from '@mui/material';

// 模拟分类数据
const categories = [
  {
    id: 1,
    name: "电子产品",
    subcategories: [
      { id: 11, name: "手机" },
      { id: 12, name: "电脑" }
    ]
  },
  {
    id: 2,
    name: "服饰",
    subcategories: [
      { id: 21, name: "上衣" },
      { id: 22, name: "裤子" }
    ]
  }
];

export default function CategorySubcategoryPicker() {
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [selectedSubcategory, setSelectedSubcategory] = useState(null);
  const [subcategoryOptions, setSubcategoryOptions] = useState([]);

  useEffect(() => {
    setSelectedSubcategory(null);
    setSubcategoryOptions(selectedCategory?.subcategories || []);
  }, [selectedCategory]);

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>
      <Autocomplete
        value={selectedCategory}
        onChange={(event, newValue) => setSelectedCategory(newValue)}
        options={categories}
        getOptionLabel={(option) => option.name}
        isOptionEqualToValue={(option, value) => option.id === value?.id}
        renderInput={(params) => <TextField {...params} label="分类" />}
      />

      <Autocomplete
        value={selectedSubcategory}
        onChange={(event, newValue) => setSelectedSubcategory(newValue)}
        options={subcategoryOptions}
        getOptionLabel={(option) => option.name}
        isOptionEqualToValue={(option, value) => option.id === value?.id}
        disabled={!selectedCategory}
        renderInput={(params) => <TextField {...params} label="子分类" />}
      />
    </div>
  );
}

这个示例中，切换分类时会自动清空子分类选中值，同时通过自定义匹配逻辑确保界面同步更新。

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