Material UI Autocomplete值显示为undefined问题求助

你的问题出在两个关键配置错误上：

1. isOptionEqualToValue 逻辑错误 #

这个函数的作用是判断选项对象与组件当前值是否匹配，第二个参数 v 是组件当前的 value（即你设置的 defaultValue 或受控模式下的 value），而非硬编码的 VALUE 常量。之前的写法会强制把所有选项和固定的 "email" 对比，导致组件无法正确识别默认值对应的选项。

正确写法应该是对比选项的 value 属性与当前组件值的对应属性：

isOptionEqualToValue={(option, value) => option.value === value.value}

2. defaultValue 类型不匹配 #

Autocomplete 的 defaultValue 需要是选项数组中的完整对象，而非单独的字符串值。你之前尝试用 options.find(o => o.value === VALUE) 是正确方向，但因 isOptionEqualToValue 写错导致未生效。

另外可以把初始 result 状态直接设为 VALUE，避免显示默认提示文本。

修正后的完整代码 #

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

const VALUE = "email";

const options = [
  {
    value: "online",
    desc: "Online / Social Media"
  },
  {
    value: "phone",
    desc: "Telephone call"
  },
  {
    value: "email",
    desc: "Email"
  },
  {
    value: "postal",
    desc: "Arrived via postal service"
  }
];

export default function ComboBox() {
  // 初始状态直接设为目标值
  const [result, setResult] = React.useState(VALUE);

  const handleChange = (e, v) => {
    // 处理选项未选中的边界情况
    setResult(v?.value || "");
  };

  return (
    <>
      <Autocomplete
        id={"p_source"}
        openOnFocus={true}
        onChange={handleChange}
        options={options}
        // 正确匹配选项与组件值
        isOptionEqualToValue={(option, value) => option.value === value.value}
        getOptionLabel={(o) => o.desc}
        // 设置为选项数组中的对应对象
        defaultValue={options.find(o => o.value === VALUE)}
        renderInput={(params) => (
          <TextField {...params} label={"Hello"} variant={"outlined"} />
        )}
      />
      <p>|{result}|</p>
    </>
  );
}

简化写法（可选） #

如果只需要保存值字符串而非完整选项对象，可以调整配置让组件直接使用字符串作为 value：

• 将 isOptionEqualToValue 改为 (option, value) => option.value === value
• defaultValue 直接设为 VALUE（字符串）
• handleChange 中直接 setResult(v)

这种写法更适合仅需存储值的场景，代码会更简洁。

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