使用@mui/material Autocomplete遇Cannot read properties of undefined错误求助

问题根源 #

你的代码中，Autocomplete的options是字符串数组["a", "b", "c"]，但getOptionLabel函数里尝试读取option.name——字符串类型的元素并没有name属性，导致返回undefined，进而触发MUI内部样式或逻辑处理时的错误。

修正方案 #

方案1：适配字符串类型的options #

直接在getOptionLabel中返回字符串本身即可：

<Autocomplete
  id="free-solo-demo"
  options={["a", "b", "c"]}
  getOptionLabel={option => option}
  renderInput={(params) => (
    <TextField
      {...params}
      label="freeSolo"
      margin="normal"
      variant="outlined"
      fullWidth
    />
  )}
/>

方案2：改为对象类型的options #

如果你的业务场景需要使用对象结构的选项，调整options数组为对象数组：

<Autocomplete
  id="free-solo-demo"
  options={[{name: "a"}, {name: "b"}, {name: "c"}]}
  getOptionLabel={option => (option ? option.name : "")}
  renderInput={(params) => (
    <TextField
      {...params}
      label="freeSolo"
      margin="normal"
      variant="outlined"
      fullWidth
    />
  )}
/>

方案3：兼容多种类型的选项 #

如果需要同时支持字符串和对象类型的选项，可以添加可选链和空值合并操作符做兼容：

<Autocomplete
  id="free-solo-demo"
  options={["a", {name: "b"}, "c"]}
  getOptionLabel={option => (option?.name ?? option)}
  renderInput={(params) => (
    <TextField
      {...params}
      label="freeSolo"
      margin="normal"
      variant="outlined"
      fullWidth
    />
  )}
/>

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