Candidate.toLowerCase 不是函数。（在“candidate.toLowerCase()”中，“candidate.toLowerCase”未定义）Material UI

Question

我正在使用AutoComplete APIMaterial UI。有一个top100Films对象，其中包含电影的标题和年份。如果我top100Film.title按照代码中所示进行搜索，我的自动完成功能可以正常工作

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.title} // <--
  style={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>

但如果我想搜索电影，top100Films.year那么我会收到一条错误消息

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.year}//<--
  style={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>

Candidate.toLowerCase 不是函数。（在“candidate.toLowerCase（）”中，“candidate.toLowerCase”未定义）

我如何使用除.title

代码在链接中

Answer 1

getOptionLabel应该返回字符串，而top100Films.year返回数字。更改getOptionLabel如下，它会正常工作：

  getOptionLabel={(option) => option.year.toString()}

沙箱