MUI AutoComplete组件不设初始默认值时如何解决警告问题？

针对你遇到的两个警告，有两种直接的解决方式，根据你使用受控/非受控组件的需求选择：

方式一：使用受控组件（推荐） #

将状态初始化为null，而非undefined或空字符串，配合onChange维护状态：

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

function MyAutocomplete() {
  // 用null表示初始无选中项
  const [selectedValue, setSelectedValue] = useState(null);

  const options = [
    { label: '选项1', value: 'opt1' },
    { label: '选项2', value: 'opt2' },
  ];

  return (
    <Autocomplete
      value={selectedValue}
      onChange={(event, newValue) => {
        setSelectedValue(newValue);
      }}
      options={options}
      renderInput={(params) => <TextField {...params} label="选择选项" />}
    />
  );
}

方式二：使用非受控组件 #

如果不需要手动维护状态，直接设置defaultValue={null}：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

function MyAutocomplete() {
  const options = [
    { label: '选项1', value: 'opt1' },
    { label: '选项2', value: 'opt2' },
  ];

  return (
    <Autocomplete
      defaultValue={null}
      options={options}
      renderInput={(params) => <TextField {...params} label="选择选项" />}
    />
  );
}

特殊场景：必须用空字符串作为初始值 #

如果你的业务逻辑需要空字符串作为初始状态，可以自定义isOptionEqualToValue函数，明确值与选项的匹配规则：

<Autocomplete
  defaultValue=""
  options={options}
  isOptionEqualToValue={(option, value) => {
    // 当值为空字符串时，判定为匹配（或根据你的选项结构调整逻辑）
    if (value === '') return option.value === '';
    return option.value === value;
  }}
  renderInput={(params) => <TextField {...params} label="选择选项" />}
/>

原理说明 #

• MUI Autocomplete默认将null视为合法的"无选中"状态，不会触发「值无效」的警告
• 初始值设为null后，组件状态从一开始就明确（受控模式下value不为undefined，非受控模式下defaultValue明确），避免了「从非受控切换到受控」的警告

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung