Autocomplete 的 `getOptionLabel` 方法返回对象（[object Object]）而不是字符串

Question

我是 ReactJS 的新手，目前正在使用 @mui 控件、带有自动完成功能的多选下拉菜单。

下面是我正在使用并收到错误消息的子组件。 “index.js:1 Material-UI：自动完成的 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>
    );
}

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

How to set default selected items in Autocomplete Material-ui <Autocomplete /> getOptionLabel - passing empty string as value Material-ui Autocomplete warning The value provided to Autocomplete is invalid to-autocomplete-is-invalid https://github.com/mui-org/material-ui/issues/18514

谢谢

Answer 1

getOptionLabel 期望返回一个返回字符串的函数。

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