Material UI Autocomplete 多选时更新状态如何避免不必要重渲染

你遇到的多选失效问题，本质不是单次值变更触发的重渲染导致的，是两个配置缺失叠加实现方式不当带来的：

• 没有给Autocomplete显式绑定受控状态的value属性，组件无法持久追踪选中值——组件不知道你存储的selectedUsers是什么，每次状态更新触发重渲染时，内部的临时选中状态会被直接重置
• 把整个Autocomplete封装在独立的renderUserAssignmentForm渲染函数里，每次父组件重渲染时，函数内部定义的复选框图标、组件结构都会生成全新的引用，React会把这些元素判定为需要重新创建的节点，直接把已挂载的Autocomplete卸载重建，之前的选中状态会完全丢失

单选模式下功能正常，是因为单选选中后默认会自动收起下拉面板，就算组件被重建，用户也感知不到状态丢失；但你配置了disableCloseOnSelect保持下拉面板打开，需要持续选择，组件被重置的问题就会直接暴露，表现为选完第一个选项就没法继续选第二个。

• 补上受控绑定：把存储的选中状态直接传给Autocomplete的value属性，让组件和状态完全同步，这是MUI Autocomplete多选正常工作的基础
• 把固定不随交互变化的常量（复选框图标）移到组件作用域外部定义，只初始化一次，避免每次渲染生成全新的元素引用
• 用useCallback包裹稳定的回调函数，保持函数引用稳定，避免内联匿名函数带来的引用抖动，减少不必要的子组件重渲染
• 删掉独立的renderUserAssignmentForm函数，直接把Autocomplete的JSX放到父组件的渲染返回结构中，避免不必要的组件卸载重建

// 移到组件外部，只初始化一次
const UncheckedIcon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const CheckedIcon = <CheckBoxIcon fontSize="small" />;

// 父组件内部逻辑
const [selectedUsers, setSelectedUsers] = useState([]);

// 用useCallback保持函数引用稳定，避免不必要的重渲染
const handleUserAssignEvent = useCallback((event, value) => {
  setSelectedUsers(value);
}, []);

return (
  <Autocomplete
    multiple
    id="usersList"
    // 补上关键的value绑定，同步受控状态
    value={selectedUsers}
    options={filteredUsers ?? users ?? []}
    noOptionsText="No users found..."
    disableCloseOnSelect
    // 直接传稳定引用的处理函数，不要写内联箭头函数
    onChange={handleUserAssignEvent}
    getOptionLabel={(option) => option.fullname}
    renderOption={(props, option, { selected }) => (
      // 注意：MUI v5+ 版本需要把props绑定到外层元素，不然会影响点击选中、键盘导航等交互
      <li {...props}>
        <Checkbox
          icon={UncheckedIcon}
          checkedIcon={CheckedIcon}
          style={{ marginRight: 8 }}
          checked={selected}
        />
        {option.fullname}
      </li>
    )}
    style={{ width: 500 }}
    renderInput={(params) => (
      <TextField
        {...params}
        variant="outlined"
        label="Users"
        placeholder="User lookup..."
      />
    )}
  />
)

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