将对象数组传递给useHook(Downshift Js)会产生错误。

Question

我遵循了基本用法--在下移中--示例，但将下拉列表中显示的项数组从星战(字符串数组)更改为shared.js中的对象数组(例如Id: 1，描述：‘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()))
  );
},