MUI v5 Autocomplete自定义选项选中后文本框不显示选中值问题

问题根因 #

MUI Autocomplete 组件的 value 属性类型需要和 options 数组的元素类型保持一致：你当前的options 是包含title、id的对象数组，但给value传的是数字类型的id，getOptionLabel 接收的入参实际是你传入的数字id，而非匹配到的选项对象，因此无法读取title字段渲染显示内容，isOptionEqualToValue仅用于下拉列表内的选项高亮匹配，不负责输入框的显示内容逻辑。

解决方案 #

这里提供两种可行实现方式，你可以根据业务需求选择： #

方案1：state存储完整选项对象（更推荐，符合组件原生设计）

如果没有强制要求state仅存id，优先选择这种方案，逻辑更简洁，需要使用id时直接取movie.id即可：

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

export default function ComboBox() {
  // 初始值直接取id为2的选项对象
  const [movie, setMovie] = React.useState(top100Films.find(item => item.id === 2));

  return (
    <>
      Movie ID value in the state {movie?.id}
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        // 直接传完整对象作为value
        value={movie}
        options={top100Films}
        onChange={(e, data) => {
          // 选中时存储完整选项对象
          setMovie(data);
        }}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        isOptionEqualToValue={(option, value) => option.id === value.id}
      />
    </>
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", id: 1 },
  { title: "The Godfather", id: 2 },
  { title: "The Godfather: Part II", id: 3 }
];

方案2：state仅存储id，手动映射匹配选项

如果业务要求state只能存id，可以根据当前id从options数组中匹配到对应的对象传给value属性：

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

export default function ComboBox() {
  const [movieId, setMovieId] = React.useState(2);
  // 手动根据id匹配对应的选项对象
  const matchedMovie = top100Films.find(item => item.id === movieId) || null;

  return (
    <>
      Movie ID value in the state {movieId}
      <Autocomplete
        disablePortal
        id="combo-box-demo"
        // 传匹配到的对象作为value
        value={matchedMovie}
        options={top100Films}
        onChange={(e, data) => {
          if (data?.id) {
            setMovieId(data.id);
          }
        }}
        getOptionLabel={(option) => option.title || ""}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Movie" />}
        isOptionEqualToValue={(option, value) => option.id === value.id}
      />
    </>
  );
}

const top100Films = [
  { title: "The Shawshank Redemption", id: 1 },
  { title: "The Godfather", id: 2 },
  { title: "The Godfather: Part II", id: 3 }
];

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