Javascript Map（）菜单项。如何选择菜单项？

不确定如何正确定位菜单项并更改样式。目前，当我使用map（）时，它将更改所有图标样式，因此这将影响所有菜单项。我是否可以只针对所选项目

const SIDEBAR = [
  {
    key: "home",
    name: "Home",
    icon: "home"
  },
  {
    key: "User",
    name: "User",
    icon: "copy"
  },
  {
    key: "Copy",
    name: "Copy",
    icon: "copy"
  }
];

export default function App() {
  const { Sider } = Layout;

  const [filled, setFilled] = useState(false);
  const handleIt = e => {
    setFilled(true);
    console.log(e.key);
  };
  return (
    <Sider breakpoint="xs">
      <Menu onClick={handleIt} mode="inline" defaultSelectedKeys={["home"]}>
        {SIDEBAR.map(menu => (
          <Menu.Item item={menu.name} key={menu.key}>
            <Icon theme={filled && "filled"} type={menu.icon} />
            <span>{menu.name}</span>
          </Menu.Item>
        ))}
      </Menu>
    </Sider>
  );
}

const侧边栏=[
{
钥匙：“家”，
姓名：“家”，
图标：“家”
},
{
密钥：“用户”，
名称：“用户”，
图标：“复制”
},
{
密钥：“复制”，
名称：“副本”，
图标：“复制”
}
];
导出默认函数App（）{
const{Sider}=布局；
const[filled，setFilled]=useState（false）；
常数handleIt=e=>{
setFilled（真）；
控制台日志（e.key）；
};
返回(
{SIDEBAR.map（菜单=>(
{menu.name}
))}
);
}

---

如果你想继续使用地图，我 将添加一个状态以了解已选择的元素。应该是下面写的东西

    export default function App() {
      const { Sider } = Layout;

      const [selectedMenuElt, setSelectedMenuElt] = useState();

      const handleIt = e => {
        setSelectedMenuElt(e.key);
      };
      return (
        <Sider breakpoint="xs">
          <Menu onClick={handleIt} mode="inline" defaultSelectedKeys={["home"]}>
            {SIDEBAR.map(menu => (
              <Menu.Item item={menu.name} key={menu.key}>
                <Icon theme={menu.key === selectedMenuElt && "filled"} type={menu.icon} />
                <span>{menu.name}</span>
              </Menu.Item>
            ))}
          </Menu>
        </Sider>  );}

导出默认函数App（）{
const{Sider}=布局；
常量[selectedMenuElt，setSelectedMenuElt]=useState（）；
常数handleIt=e=>{
设置选定的菜单（e键）；
};
返回(
{SIDEBAR.map（菜单=>(
{menu.name}
))}
);}

您可能希望在您的状态中保留一个数组，而不是现有的数组，例如

const App = () => {
  const [selected, setSelected] = useState([]);

  return (
    <Menu>
      {SIDEBAR.map((item) => (
        <Menu.item 
          onCLick={() => {
            if (selected.includes(item.key))
              setSelected(selected.filter(i => i !== item.key))
            else
              setSelected([...selected, item.key])
          }
        />
          <Icon theme={selected.includes(item.key) && "filled"} type={menu.icon} />
          <span>{menu.name}</span>
        </Menu.item>
      });
    </Menu>

  )
}

const-App=（）=>{
const[selected，setSelected]=useState（[]）；
返回(
{SIDEBAR.map（（项目）=>(
{
如果（已选择。包括（项。键））
setSelected（selected.filter（i=>i！==item.key））
其他的
setSelected（[…selected，item.key]）
}
/>
{menu.name}
});
)
}

I 更愿意在菜单项上设置一个类，并使用css管理元素的样式。