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參數，但我看到它還沒有在組件中使用。