自动完成组件在反应应用程序中给出错误

Question

我正在尝试在我的 React 应用程序中插入一个自动完成组件，但出现错误

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

每当我尝试select一个选项时

这是自动完成代码

 <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

自动完成组件在反应应用程序中给出错误

autocomplete component gives error in react app

html

combobox

option

reactjs