Material-ui Autocomplete组件设置defaultValue属性不生效问题咨询

问题根因 #

• 你为组件同时配置了value属性和defaultValue属性，当Autocomplete处于受控模式（绑定value+onChange）时，defaultValue配置会被完全忽略，仅以value绑定的状态值为准。你的初始selected状态是空字符串，因此默认选中不生效。
• 你的options（Items2）是包含label属性的对象数组，即便使用非受控模式，defaultValue也需要传入和option结构一致的对象，直接传字符串"Chairs"无法和选项匹配，和你配置的isOptionEqualToValue匹配逻辑也不契合。
• 额外注意：你配置的fullwidth属性写法错误，MUI对应属性为大驼峰格式fullWidth，小写写法会导致宽度配置不生效。

修复方案 #

方案1：保持受控模式（推荐） #

直接给useState设置正确的初始值，删除无效的defaultValue配置即可，修改后代码如下：

import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { Items2 } from "./Items2";

export default function ComboBox() {
  // 初始值设置为和options结构匹配的对象
  const [selected, setSelected] = useState(Items2.find(item => item.label === "Chairs"));

  console.log(selected);

  return (
    <>
      you selected: {selected?.label}
      <br />
      <br />
      <Autocomplete
        disablePortal
        isOptionEqualToValue={(option, value) => option?.label === value?.label}
        id="combo-box-demo"
        options={Items2}
        fullWidth
        value={selected}
        onChange={(event, value) => setSelected(value)}
        renderInput={(params) => <TextField {...params} label="Items" />}
      />
    </>
  );
}

方案2：切换为非受控模式 #

如果你不需要手动控制选中状态，删除value和onChange绑定，给defaultValue传入结构正确的对象即可：

<Autocomplete
  disablePortal
  isOptionEqualToValue={(option, value) => option?.label === value?.label}
  id="combo-box-demo"
  options={Items2}
  defaultValue={Items2.find(item => item.label === "Chairs")}
  fullWidth
  renderInput={(params) => <TextField {...params} label="Items" />}
/>

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