ReactJs, TypeScript TypeError: menuItems.map is not a function, error on map

Question

您好，我有以下 useState 逻辑和 map 一个数组，一次只显示一个 dropdownItems

在这里，我的数组带有标签（菜单名称，链接（到路由器），图标（菜单图标），如果有下拉项目（下拉项目））

我的菜单标签：

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' },
    ],
  },
];

我的 MenuTag（此处为 useState 和 map）：

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>
  );
};

我的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>
  );
};

如果菜单标签有下拉项目我的下拉：

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>
  );
};

对不起，我忘记了错误

我收到此错误：未捕获的类型错误：menuItems.map is not a function here：

<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);
    }}
>

更具体地说，您在onClick处理程序中调用tagFunction （即setMenuItems ），其Name参数不是数组，并且您正在为menuItems state 设置它。 由于它不是数组它没有map，所以有错误。

您可能在这里遇到类似的潜在错误：

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

使用setVisible参数，但我看到它还没有在组件中使用。