MUI 5.2.2 Autocomplete多选受控模式输入异常问题求解

1. 引用不稳定触发组件异常重置：你直接在组件内部写const value = []时，每次组件重渲染都会生成一个全新的数组引用。而useState返回的状态值引用是稳定的，除非你主动调用setValue修改它，否则重渲染时不会发生变化。
2. MUI Autocomplete的受控逻辑设计：当组件检测到value属性的引用发生变化时，会默认同步重置内部输入框状态，哪怕数组的内容完全一致。你每次输入字符触发setInputValue导致组件重渲染，新的value引用就会触发这个重置逻辑，直接把你刚输入的内容清空，所以看起来无法输入。

针对你需要对传入的props做默认值处理的场景，核心是保证value的引用稳定，有两种常用实现方式：

• 如果props传入的value仅作为初始默认值，后续不受props变化影响，直接用useState初始化即可：

const [value, setValue] = React.useState<any | null>(props.value ?? []);

• 如果需要响应props.value的动态变化，用useMemo缓存默认值保证引用稳定：

const value = React.useMemo(() => {
  return props.value ?? [];
}, [props.value]);

注意如果组件需要支持选中选项的受控逻辑，需要配套实现Autocomplete的onChange回调更新对应状态，避免后续选择操作出现异常。

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