如何为Material UI的Autocomplete组件设置默认值？解决刷新后值为空问题

• React 的 useState 是内存态存储，页面刷新后所有组件内存中的状态都会被重置，这是框架基础特性，并非MUI Autocomplete组件本身的缺陷
• 你当前的Autocomplete没有绑定外部状态的value属性，属于非受控写法，组件内部状态和外部用来渲染区号的newValue状态完全脱节，存在状态不同步的问题
• useState 初始值设置存在逻辑漏洞：初始写为空对象 {}，但三元判断的兜底条件是 newValue == null，空对象不会触发兜底逻辑，最终渲染出来的区号值为undefined
• 没有对用户清空选项的场景做兜底：Autocomplete选中项被清空时，onChange 回调拿到的value是null，直接赋值给状态就会导致渲染时出现空引用错误

1. 修正Autocomplete的受控绑定逻辑 #

因为需要用newValue的值在外部渲染区号，必须把Autocomplete改成真正的受控组件，让组件状态和外部React状态完全同步：

• 先提取通用的默认值，直接从cities选项数组中匹配默认对应的国家项，避免自造对象和options结构不匹配：

// 从cities数组中找到区号为91的项，匹配失败时兜底一个结构和options完全一致的默认值
const DEFAULT_COUNTRY = cities.find(item => item.calling_code === 91) || { country: "India", calling_code: 91 };

• 给useState设置正确的初始值，替代原来的空对象初始值：

const [newValue, setNewValue] = useState(DEFAULT_COUNTRY);

• 给Autocomplete组件新增value绑定，实现内外状态同步，同时在onChange回调里加空值兜底：

<Autocomplete
  // 保留原有配置：size、options、getOptionLabel、renderOption等
  value={newValue} // 新增这行，绑定外部受控状态
  onChange={(event, value) => {
    // 兜底：如果用户清空选择，回退到默认国家值，避免newValue变为null
    const finalValue = value || DEFAULT_COUNTRY;
    setNewValue(finalValue);
    textToggleState(!textToggle);
  }}
  // 原注释掉的defaultValue属性不需要保留，受控组件由value属性控制选中态
/>

• 简化外部h5的渲染逻辑，去掉多余的null判断：

<h5>+{newValue.calling_code}</h5>

到这一步，页面刷新后组件会自动用默认值初始化，不会出现状态丢失、区号显示异常的问题。

2. 可选：实现刷新后保留用户选中值 #

如果需要让页面刷新后，用户之前选中的国家不重置，需要把选中状态做持久化存储——内存态的状态刷新必然丢失：

• 改造useState的初始化逻辑，优先从本地存储读取历史选中值，读取失败/无历史值时用默认值：

const [newValue, setNewValue] = useState(() => {
  const savedSelected = localStorage.getItem("selectedCountry");
  if (savedSelected) {
    try {
      // 解析本地存储的JSON数据
      return JSON.parse(savedSelected);
    } catch (err) {
      // 解析异常时回退到默认值
      return DEFAULT_COUNTRY;
    }
  }
  return DEFAULT_COUNTRY;
});

• 改造onChange回调，在更新状态的同时把选中值同步到本地存储：

onChange={(event, value) => {
  const finalValue = value || DEFAULT_COUNTRY;
  setNewValue(finalValue);
  localStorage.setItem("selectedCountry", JSON.stringify(finalValue));
  textToggleState(!textToggle);
}}

• 不要用自行构造的对象作为Autocomplete的选中值/默认值：即使对象字段和内容与options数组中的项完全一致，只要内存引用地址不同，Autocomplete就会出现选中态匹配异常，优先直接从options数组中取对应项作为默认值
• 做受控绑定的Autocomplete必须传入value属性，否则组件内部维护的选中态和外部通过onChange拿到的状态会完全脱节，容易出现选中不同步、刷新后值对不上的问题
• Autocomplete允许清空选项的场景下，onChange回调拿到的第二个参数为null，必须加空值兜底再赋值给状态，否则后续访问对象属性会抛出空引用错误

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