ReactJs, TypeScript TypeError: menuItems.map не является функцией, ошибка на карте

Question

Здравствуйте, у меня есть следующие логики c useState и сопоставление массива для отображения только одного dropdownItems за раз

здесь у меня есть мой массив с тегами (имя меню, ссылки (к маршрутизатору), значок (значок меню), если есть выпадающие элементы (выпадающие элементы))

мои теги Menu:

export interface IDropdownItems {
  Name: string;
  Link: string;
}
export interface ITag {
  Name: string;
  Link: string;
  Icon: IconType;
  DropdownItems: IDropdownItems[] | null;
  Active: boolean;
}

export const SideBarTags: ITag[] = [
  {
    Name: 'Tutoriais',
    Link: '../tutorials',
    Icon: GoBook,
    DropdownItems: null,
    Active: false,
  },
  {
    Name: 'Avisos',
    Link: '../news',
    Icon: GoAlert,
    DropdownItems: null,
    Active: false,
  },
  {
    Name: 'Serviços',
    Link: '../services',
    Icon: GoRocket,
    Active: false,
    DropdownItems: [
      { Name: 'Elo Boost', Link: '/eloBost' },
      { Name: 'Duo Boost', Link: '/duoBoost' },
      { Name: 'MD10', Link: '/eloBost' },
      { Name: 'Coaching', Link: '/duoBoost' },
      { Name: 'Vitóriais', Link: '/duoBoost' },
    ],
  },
  {
    Name: 'Carteira',
    Link: '../cartcredit',
    Icon: FaCoins,
    Active: false,
    DropdownItems: [
      { Name: 'Histórico', Link: '/history' },
      { Name: 'Adicionar Crédito', Link: '/add' },
    ],
  },
];

мой тег Menu (используйте здесь и карту здесь):

const MenuTags: React.FC<MenuTags> = ({ sideisOpen }) => {
  const [menuItems, setMenuItems] = useState(SideBarTags);
  return (
    <MenuList open={sideisOpen}>
      {menuItems.map((item, index) => (
        <MenuTagsItems
          key={item.Name}
          Name={item.Name}
          Active={item.Active}
          DropdownItems={item.DropdownItems}
          Icon={item.Icon}
          Link={item.Link}
          sideisOpened={sideisOpen}
          tagFunction={setMenuItems}
        />
      ))}
    </MenuList>
  );
};

my MenuTagsItems

const MenuTagsItems: React.FC<ITag & IMenuTagsItems> = ({
  sideisOpened,
  Name,
  Active,
  DropdownItems,
  Icon,
  Link,
  tagFunction,
}) => {
  const clickHandler = (value) => () => {
    console.log(value);
    tagFunction((items) =>
      items.map((item) => ({
        ...item,
        Active: item.Name === value,
      }))
    );
  };
  return (
    <ListItem>
      <ListWrap
        open={sideisOpened}
        active={Active}
        onClick={() => {
          tagFunction(Name);
        }}
      >
        <a>
          <Icon size={18} />
          <span className="li-name">{Name}</span>
        </a>
      </ListWrap>
      {DropdownItems && (
        <Drop
          active={Active}
          dropItems={DropdownItems}
          Icon={Icon}
          isOpen={sideisOpened}
          setVisible={tagFunction}
        />
      )}
    </ListItem>
  );
};

и, если тег меню имеет выпадающие элементы my DropDown:

const Drop: React.FC<IDrop> = ({
  active,
  isOpen,
  dropItems,
  setVisible,
  Icon,
}) => {
  return (
    <OpenedStyled active={active}>
      {dropItems.map((item) => (
        <li className="li-open" key={item.Name}>
          <Icon />
          <a>{item.Name}</a>
        </li>
      ))}
    </OpenedStyled>
  );
};

извините, я забыл ошибку

я получил эту ошибку: Uncaught TypeError: menuItems.map здесь не является функцией:

<MenuList open={sideisOpen}>
  {menuItems.map((item, index) => (
    <MenuTagsItems
      key={item.Name}
      Name={item.Name}
      Active={item.Active}
      DropdownItems={item.DropdownItems}
      Icon={item.Icon}
      Link={item.Link}
      sideisOpened={sideisOpen}
      tagFunction={setMenuItems}
    />
  ))}
</MenuList>

Answer 1

Похоже, что проблема здесь:

<ListWrap
    open={sideisOpened}
    active={Active}
    onClick={() => {
       tagFunction(Name);
    }}
>

Более конкретно c, вы вызываете tagFunction (то есть setMenuItems) в обработчике onClick с параметром Name это не массив, и вы устанавливаете его для состояния menuItems. Поскольку это не массив, у него нет карты, поэтому есть ошибка.

Подобная потенциальная ошибка, которую вы могли бы иметь здесь:

<Drop
   active={Active}
   dropItems={DropdownItems}
   Icon={Icon}
   isOpen={sideisOpened}
   setVisible={tagFunction}
/>

с параметром setVisible, но я вижу он еще не используется в компоненте.