React Material UI Autocomplete如何获取搜索数据的ID

你当前的问题在于options被处理成了仅包含item文本的数组，导致Autocomplete只能返回文本值，无法关联对应的ID。调整方式如下：

1. 保留完整的对象数组作为options：不要用map提取item，直接传入原始的data数组（每个元素包含_id和item字段）
2. 配置getOptionLabel指定显示文本：告诉Autocomplete每个选项要展示的内容是对象里的item字段
3. 在onChange中获取完整对象，提取ID：此时value会是选中的完整对象，直接取value._id即可

修改后的代码：

<Autocomplete
  id="free-solo-demo"
  freeSolo
  options={data} // 直接传入原始数据数组
  getOptionLabel={(option) => option.item} // 指定选项显示的文本字段
  renderInput={(params) => <TextField {...params} label="Search" />}
  onChange={(event, value) => {
    // 选中项为完整对象，可提取ID
    if (value) {
      setSearch(value.item); // 若仍需保存搜索文本
      setSelectedId(value._id); // 保存对应的ID，需提前定义该状态
    }
  }}
/>

若只需保存ID，可简化为：

onChange={(event, value) => value && setSelectedId(value._id)}

说明：

• getOptionLabel是Autocomplete处理对象数组时的必填配置，用于定义选项在输入框和下拉列表中显示的文本内容
• 选中选项后，onChange的value参数为对应的完整数据对象，即可直接获取_id字段

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