Material UI Autocomplete切换Tabs后下拉功能失效问题排查

核心问题：Autocomplete参数混用+状态存储类型不匹配 #

你的代码存在两个关键错误，直接导致Tab切换后下拉失效：

1. 错误混用value和inputValue：
   Material UI Autocomplete中，value需要绑定完整的选项对象（比如{id:101, label:"10"}），inputValue才是输入框显示的文本字符串。你现在把同一个字符串值同时传给这两个属性，导致组件内部状态逻辑混乱。
2. 状态仅存储字符串而非选项对象：
   你的onChange只把选项的label存入tr字段，但Autocomplete需要通过完整的选项对象来匹配选中状态，切换Tab后组件无法找到对应选项，下拉功能因此失效。

修复步骤 #

1. 修正Dropdownlist组件参数传递 #

区分value和inputValue，确保绑定对应类型的值：

const Dropdownlist = ({ defaultRates, selectedOption, onChange, index }) => {
  return (
    <Autocomplete
      {...defaultRates}
      size="small"
      inputValue={selectedOption?.label || ""}
      value={selectedOption}
      autoSelect={true}
      clearOnEscape={true}
      onChange={(event, newValue) => {
        onChange(newValue, index);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  );
};

export default Dropdownlist;

2. 调整父组件状态存储逻辑 #

将完整的选项对象存入状态，而非仅存label：

// 结合useImmer的正确写法
const onChange = (selectedOption, i) => {
  if (selectedOption) {
    setTransactions(produce(draft => {
      const item = draft[i];
      const tds = (selectedOption.label / 100) * item.amount;
      item.tr = selectedOption; // 存储完整选项对象
      item.tds = tds;
      item.error = false;
    }));
  }
};

3. 传递正确属性给Dropdownlist #

渲染时传入完整的选项对象：

<Dropdownlist
  defaultRates={defaultRates}
  selectedOption={transaction.tr}
  onChange={onChange}
  index={index}
/>

额外优化建议 #

• 用useMemo缓存defaultRates，避免每次渲染重新生成选项数组：

const defaultRates = useMemo(() => {
  const ratings = Rates.map((charge) => ({ 
    id: charge.rateid, 
    label: charge.rate 
  }));
  return {
    options: ratings,
    getOptionLabel: (option) => option.label,
  };
}, []);

• 如果Tab切换时希望保留未激活Tab的组件状态，给TabPanel添加keepMounted属性（Material UI v5+支持），避免组件卸载后重新渲染引发的状态异常。

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