MUI Autocomplete选择值后文本框恢复默认值问题求助

针对你遇到的Autocomplete选中值后自动回退的问题，核心原因是受控组件的状态同步异常，结合你的代码，给出以下具体修复方案：

1. 修正onChange的参数获取 #

Autocomplete的onChange回调第二个参数才是选中的选项对象，你当前只传递了事件对象e，导致无法正确获取选中值来更新状态。修改代码：

<Autocomplete
  // 其他属性保持不变
  onChange={(e, newValue) => handleBullPickerChanged(row, pack, newValue)}
  // ...
/>

同时在handleBullPickerChanged函数中，使用newValue.ItemNumber去更新对应row的BullItemNumber状态（比如在你的状态数组中找到该row并修改其属性）。

2. 添加isOptionEqualToValue属性 #

当选项是对象类型时，Autocomplete默认通过引用判断选项是否相等，如果你的bullsToPickFromForItem数组是动态生成的（每次渲染生成新对象），即使ItemNumber相同，引用不同也会导致组件无法识别选中状态。添加该属性明确判断规则：

<Autocomplete
  // 其他属性保持不变
  isOptionEqualToValue={(option, value) => option.ItemNumber === value.ItemNumber}
  // ...
/>

3. 确保bullsToPickFromForItem引用稳定 #

如果bullsToPickFromForItem是在组件内部每次渲染都重新生成的数组（比如直接在组件内定义而未缓存），会导致find每次返回新对象，触发组件不必要的重渲染和状态异常。用useMemo缓存该数组：

import { useMemo } from 'react';

// 在组件内部
const bullsToPickFromForItem = useMemo(() => {
  // 你的数组生成逻辑，比如从接口获取或处理原始数据
  return yourRawBullsData.map(/* 处理逻辑 */);
}, [yourRawBullsData]); // 依赖项：只有原始数据变化时才重新生成数组

4. 检查状态更新的不可变性 #

React状态更新需要保持不可变性，如果你在handleBullPickerChanged中直接修改row对象的属性（比如row.BullItemNumber = newValue.ItemNumber），不会触发组件重新渲染，导致value始终用旧值。正确的更新方式应该是创建新的数组/对象：

const handleBullPickerChanged = (row, pack, newValue) => {
  // 假设你的rows状态是一个数组，比如const [rows, setRows] = useState([])
  setRows(prevRows => prevRows.map(item => 
    item.id === row.id 
      ? { ...item, BullItemNumber: newValue?.ItemNumber || null }
      : item
  ));
};

把这些修改结合到你的代码中，基本就能解决选中值后回退的问题。

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