自动完成组件在React应用程序中返回未定义的错误

Question

我试图在我的react应用程序中插入一个自动完成组件，但我得到了错误：

The `getOptionLabel` method of Autocomplete returned undefined instead of a string for "Score".

每当我尝试选择一个选项时。

这是自动完成代码：

<Autocomplete
id="id"
options={["Score","Name"]}
getOptionLabel={option=> option.label}
style={{width:300}}
renderInput={params => (
<TextField {...params} label="Sort By" variant="outlined" />
)}
/>

Answer 1

将options作为字符串数组(["Score","Name"](传递然后将getOptionLabel作为option => option.label传递，但您的选项是纯字符串。

请尝试删除getOptionLabel道具，或者将options数组中的项更新为具有label属性的对象。

Answer 2

我通过创建一个带有属性标签和名称的对象列表来解决这个问题，并在getoptionlabel中写入option.label