React中Autocomplete组件报错Cannot read property 'toLowerCase' of null

报错根因 #

Material UI的Autocomplete组件内部默认会对getOptionLabel返回的标签文本调用toLowerCase方法做模糊搜索匹配，你当前的报错是因为存在部分选项的OOnavig属性为null，或者OOnavig.FULLNAME为null，导致getOptionLabel返回了null值，调用方法时报错。另外你现有代码中getOptionLabel的参数里混进了enter code here的冗余字符，也需要先清理。

解决方案 #

• 方案1：给标签取值加兜底逻辑（最常用）
  用可选链和空值合并运算符做兼容，保证getOptionLabel永远返回字符串类型的值，不会出现null/undefined：

  <Autocomplete
    id="combo-box-demo"
    options={USERS}
    getOptionLabel={(option) => option?.OOnavig?.FULLNAME ?? ''}
    style={{ width: 200 }}
    renderInput={(params) => (
      <TextField {...params} label="NAME" variant="outlined" />
    )}
  />
  

• 方案2：提前过滤无效选项
  直接把没有有效FULLNAME的选项从数据源里筛掉，避免无效值传入组件：

  <Autocomplete
    id="combo-box-demo"
    options={USERS.filter(item => item?.OOnavig?.FULLNAME)}
    getOptionLabel={(option) => option.OOnavig.FULLNAME}
    style={{ width: 200 }}
    renderInput={(params) => (
      <TextField {...params} label="NAME" variant="outlined" />
    )}
  />
  

• 方案3：自定义匹配规则
  如果不需要默认的模糊匹配逻辑，可以自定义filterOptions属性，避开默认的toLowerCase调用。

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