Autocomplete的"getOptionLabel"方法返回了对象([object objec

Question

我是ReactJS的新手，目前使用@mui控件，Multiselect Dropdown和自动完成功能。

下面是我正在处理并获取错误消息的子组件。"index.js:1 Material UI:Autocomplete的getOptionLabel方法返回对象([object object](，而不是{"label"："east"，"value"："east"}的字符串">

import React, {useState} from "react";
import { Autocomplete } from "@material-ui/lab";
import { TextField, Checkbox } from "@material-ui/core";
import { CheckBoxOutlineBlank, CheckBox } from "@material-ui/icons";
const Icon = <CheckBoxOutlineBlank />;
const checkedIcon = <CheckBox />;
export default function MultiSelectDropdown(props) {
//const savedVal = props.StoredMsgData;
const [updtVal, setupdtVal] = useState(savedVal);
//const allDDData = props.dropdownData;
const mode = props.mode;
const [open, setOpen] = useState(false);
const allDDData = [
{ label: "select all", value: "select all", selected: true },
{ label: "east", value: "east" },
{ label: "east1", value: "east1" },
{ label: "east2", value: "east2" },
{ label: "east3", value: "east3" },
];

savedVal =['east1'];
const onChangeHandler = (e, values) => {
console.log(values);
};
const onChange = (e, values) => {
console.log(values);
};
return (
<div>
<Autocomplete
multiple
options={allDDData}
disableCloseOnSelect
onChange={(e, v) => setupdtVal(v)}
defaultValue={savedVal}
getOptionSelected={(option, obj) => option.label === obj.label}   
renderOption={(option, selected) => {
if (savedVal.includes(option)) {
selected = true;
}
{
return (
<div>
<Checkbox
icon={Icon}
checkedIcon={checkedIcon}
checked={selected}
/>
{option}
</div>
);
}
}}
renderInput={(params) => {
return (
<TextField
{...params}
label={props.type}
placeholder={props.type}
variant="outlined"
/>
);
}}
style={{ width: "100%", zIndex: 999 }}
/>
</div>
);
}

我做了研究，付出了努力，但无法破解。任何帮助都将不胜感激。如果这是初学者的错误，请原谅。

如何在"自动完成"中设置默认选定项目材料ui<自动完成/>getOptionLabel-将空字符串作为值传递物料ui自动完成警告提供给自动完成的值无效自动完成无效https://github.com/mui-org/material-ui/issues/18514

感谢

Answer 1

getOptionLabel需要返回一个返回字符串的函数。

所以在你的情况下，我认为你可以试试这个：getOptionLabel={(option) => option.label}