Блог

Я следовал базовому использованию в downshift-examples, но изменил массив элементов для отображения в раскрывающемся списке с starwars (массив строк) на массив объектов (например, Id: 1, Description:’item’) в shared.js .

Я также зарегистрировал пару вещей и вставил их в приведенный ниже код, которому предшествует «==>».

Когда я запускаю приложение, появляется выпадающий список. Но в тот момент, когда я нажимаю на стрелку выпадающего списка в правой части выпадающего списка, отображается следующая ошибка.

Неперехваченная ошибка: объекты недопустимы в качестве дочернего элемента 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())
        )
      );
    },
  });```
  

Список элементов для массива объектов ({Id:0, Description:’abc’} должен быть

 <ul {...getMenuProps()} style={menuStyles}>
  {isOpen amp;amp;
    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()))
  );
},