0

我遵循了 downshift-examples 中的基本用法，但是将要显示在下拉列表中的项目数组从 starwars（字符串数组）更改为 shared.js 中的对象数组（例如 Id: 1，Description:'item'） .

我还记录了一些东西并将它们内联在下面的代码中，前面加上“==>”。

当我启动应用程序时，会出现下拉菜单。但是，当我单击下拉列表右侧的下拉箭头时，会显示以下错误。

未捕获的错误：对象作为 React 子项无效（找到：带有键 {Id，Description} 的对象）。如果您打算渲染一组子项，请改用数组。

关于我做错了什么的任何想法？

import { items, menuStyles, comboboxStyles, itemToString } from "../../shared";

function DropdownCombobox() {
  const [inputItems, setInputItems] = useState(items);
  console.log(items);      // ==> Array(127)
  console.log(itemToString); // ==> i => i ? i.Description : ""
  console.log(items[1]); // ==> {Id: 38, Description: "001 - RAB"}
  const {
    isOpen,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    getInputProps,
    getComboboxProps,
    highlightedIndex,
    getItemProps,
  } = useCombobox({
    items: inputItems,
    itemToString,
    onInputValueChange: ({ inputValue }) => {
      setInputItems(
        items.filter((item) =>
          itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase())
        )
      );
    },
  });```
4

1 回答 1

0

对象数组的项目列表 ({Id:0, Description:'abc'} 应该是

<ul {...getMenuProps()} style={menuStyles}>
  {isOpen &&
    inputItems.map((item, index) => (
      <li
        style={highlightedIndex === index ? { backgroundColor: '#bde4ff' } : {}}
        key={item.Id}
        {...getItemProps({ item, index })}
      >
        {item.Description}
      </li>
    ))}
</ul>

并且应该更改以下处理程序

onInputValueChange: ({ inputValue }) => {
  setInputItems(
    items.filter((item) => item.Description.toLowerCase().startsWith(inputValue.toLowerCase()))
  );
},
于 2020-11-13T21:50:05.617 回答