MUI Autocomplete组件如何实现页面加载时默认选中所有下拉选项

• 前提：以下方案以常用的Material UI Autocomplete组件为例，其他框架同逻辑可复用

静态选项场景（选项提前固定） #

• 先定义完整的下拉选项数组allOptions
• 初始化选中状态时直接传入全量allOptions即可实现默认全选，示例代码：

import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

// 提前定义好的固定下拉选项
const allOptions = ['北京', '上海', '广州', '深圳'];

export default function AutoCompleteAllSelect() {
  // 初始化直接赋值全量选项，实现默认全选
  const [selected, setSelected] = useState(allOptions);

  return (
    <Autocomplete
      multiple // 必须开启多选属性
      options={allOptions}
      value={selected}
      onChange={(_, newValue) => setSelected(newValue)}
      renderInput={(params) => <TextField {...params} label="城市选择" />}
    />
  )
}

异步加载选项场景（选项从接口获取） #

如果选项是页面加载后异步请求返回的，在拿到完整选项数据后再给选中状态赋值即可：

import React, { useState, useEffect } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import { getCityList } from '@/api/city';

export default function AutoCompleteAllSelect() {
  const [allOptions, setAllOptions] = useState([]);
  const [selected, setSelected] = useState([]);

  useEffect(() => {
    // 请求选项数据
    getCityList().then(res => {
      const cityList = res.data;
      setAllOptions(cityList);
      // 拿到全量选项后赋值，实现默认全选
      setSelected(cityList);
    })
  }, []);

  return (
    <Autocomplete
      multiple
      options={allOptions}
      value={selected}
      onChange={(_, newValue) => setSelected(newValue)}
      renderInput={(params) => <TextField {...params} label="城市选择" />}
    />
  )
}

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