將對象數組傳遞給 useHook(downshift-js) 會產生錯誤

Question

我遵循了 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())
        )
      );
    },
  });```

Answer 1

對象數組的項目列表（{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()))
  );
},