Reactjs中的降檔 - 菜單下拉列表僅顯示所選項目

Question

我在使用Downshift遇到了麻煩，最初我有所有的菜單選項，但是一旦我選擇了一個選項，那就是下次我點擊它時菜單中顯示的唯一選項。

這是我目前的代碼，有什么反饋是什么造成的？

const dropdownItems = [
  { value: 'All' },
  { value: 'Database A' },
  { value: 'Database B' },
  { value: 'Database C' },
  { value: 'Database D' },
];
return (
  <Downshift itemToString={item => (item ? item.value : '')}>
    {({
      getMenuProps,
      getItemProps,
      getToggleButtonProps,
      getRootProps,
      isOpen,
      inputValue,
      selectedItem,
      highlightedIndex,
    }) => console.log(
      selectedItem === null ? dropdownItems[0].value : selectedItem.value,
    ) || (
        <Container {...getRootProps()}>
          <button {...getToggleButtonProps()}>
            {isOpen
              ? selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value
              : selectedItem === null
                ? dropdownItems[0].value
                : selectedItem.value}
          </button>
          {isOpen ? (
            <Menu {...getMenuProps()}>
              {dropdownItems
                .filter(
                  item => !inputValue || item.value.includes(inputValue),
                )
                .map((item, index) => (
                  <Item
                    {...getItemProps({
                      key: item.value,
                      index,
                      item,
                      style: {
                        fontWeight:
                          index === highlightedIndex
                            ? 'bold'
                            : null,
                      },
                    })}
                  >
                    {item.value}
                  </Item>
                ))}
            </Menu>
          ) : null}
        </Container>
      )
    }
  </Downshift>
);

Answer 1

.filter(item => !inputValue || item.value.includes(inputValue),) 

為了解決這個問題，我刪除了.filter ，它只導致選定的值顯示在下拉列表中。

這是更新的菜單標簽

 <Menu {...getMenuProps()}>
     {dropdownItems.map((item, index) => (
        <Item
            {...getItemProps({
                  key: item.value,
                 index,
                   item,
                      style: {
                  fontWeight:
                   index === highlightedIndex
                    ? 'bold'
                    : null,
                       },
                        })}
              >
          {item.value}
         </Item>
         ))}
          </Menu>