如何初始化选中全部选项及“全选”项的Autocomplete组件

你的问题出在两个核心点：一是未根据startWithAllSelected配置正确初始化选中状态，二是全选选项属于动态插入的虚拟选项，没有同步它的选中状态判断逻辑。

具体修改步骤： #

1. 正确初始化选中状态
   将selectedOptions的初始值根据startWithAllSelected参数设置，直接把传入的所有真实选项作为初始选中项：

const [selectedOptions, setSelectedOptions] = React.useState<FilterDefinitionType[]>(
  startWithAllSelected ? [...options] : []
);

2. 同步全选选项的选中状态
   在renderOption函数中，针对全选选项单独处理选中状态——因为它不在原始options数组内，不能用默认的selected逻辑，而是通过allSelected变量（真实选项总数与选中数是否相等）来判断：

const optionRenderer = (props, option, { selected }) => {
  const isSelectAllOption = option.name === selectAllLabel;
  // 全选选项的选中状态由allSelected决定，而非是否在selectedOptions中
  const isSelected = isSelectAllOption ? allSelected : selected;

  return (
    <li {...props} selected={isSelected}>
      <Checkbox checked={isSelected} />
      {option.name}
    </li>
  );
};

修改后逻辑说明： #

• 初始化时直接选中所有真实选项，满足默认全选的需求；
• 全选选项的选中状态通过真实选项的选中比例判断，而非依赖自身是否在选中数组中，解决了虚拟选项的状态同步问题；
• 组件加载后会同时实现“所有真实选项被选中”和“下拉全选选项显示为选中”的效果。

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