reactjs Autocomplete的'getOptionLabel'方法返回的是对象([object Object])而不是字符串

zi8p0yeb  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(323)

我是ReactJS的新手,目前正在使用@mui控件,带有自动完成功能的多选下拉菜单。
下面是我的子组件,我正在使用它,并收到了错误消息。“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>
    );
}

我做了我的研究,付出了努力,但无法破解它。任何帮助将不胜感激。请原谅我,如果这是一个初学者的错误。
要自动完成的内容无效
谢谢

r9f1avp5

r9f1avp51#

getOptionLabel应该返回一个返回字符串函数。
所以我想你可以试试这个:getOptionLabel={(option) => option.label}

相关问题