reactjs - Candidate.toLowerCase 不是函数。 (在 'candidate.toLowerCase()' 中， 'candidate.toLowerCase' 未定义) Material UI

Question

我正在使用 AutoComplete API Material UI。有一个 的对象top100电影其中包含电影的标题和年份。如果我使用 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 之外的任何其他数据字段
代码在 Link

Answer 1

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

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

sandbox