Material UI AutoComplete报Uncaught TypeError错误求助

问题情况 #

使用Material UI的AutoComplete组件时，输入框搜索内容会跳转至空白页面，同时控制台抛出错误：
Uncaught TypeError: candidate.toLowerCase is not a function

现有代码 #

getOptionLabel={option => {
  return (
    <>
      {option.name}
      <span className="**">{option.dob}</span>
    </>
  );
}}

尝试过的修改（无效） #

getOptionLabel={option => {
  return (
    <>
      {option.name.toString()}
      <span className="**">{option.dob.toString()}</span>
    </>
  );
}}

选项数据示例 #

解决方法 #

问题核心在于getOptionLabel的返回值类型错误：该属性必须返回字符串，因为AutoComplete内部会用这个值做搜索匹配（调用toLowerCase()处理），而你返回的是React Fragment（JSX元素），不是字符串，所以触发了类型错误。

正确的做法是拆分职责：

1. 用getOptionLabel返回纯字符串，供搜索匹配使用
2. 用renderOption自定义下拉选项的UI格式

修改后的代码示例：

// 负责提供搜索用的文本字符串
getOptionLabel={(option) => `${option.name} ${option.dob}`}
// 负责渲染带格式的选项UI
renderOption={(props, option) => (
  <li {...props}>
    {option.name}
    <span className="**">{option.dob}</span>
  </li>
)}

这样既满足了搜索匹配的字符串要求，又能保留你想要的选项显示格式，解决报错和页面跳转问题。

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