Javascript React/Jasvascript:map函数中的动态类名设置

我有一个显示用户仪表板导航的功能。 此函数应将active funciotn设置为该元素，默认值为1个起始元素/链接。但我得到无限循环

const UserLinks = [
  {
    name: "User Details",
    linkTo: "/dashboard",
  },
  {
    name: "Change Password",
    linkTo: "/dashboard/changePassword",
  },
];
const DasboardLinks = () => {

  const [active, setActive] = useState(1);

  return (
    <SectionNavigation>
      <ul>
        { UserLinks.map((link, i) => (
              <li key={i} className={active === i ? "active" : ""}
            onClick={setActive(i)}>
                <Link to={link.linkTo}>{link.name}</Link>
              </li>
            ))}
      </ul>
    </SectionNavigation>
  );
};

const UserLinks=[
{
名称：“用户详细信息”，
链接至：“/dashboard”，
},
{
名称：“更改密码”，
链接到：“/dashboard/changePassword”，
},
];
const DasboardLinks=（）=>{
const[active，setActive]=useState（1）；
返回(

{UserLinks.map（（link，i）=>(

{link.name}

))}

);
};

---

当它被执行时，我得到了太多的重新渲染。React限制渲染数量以防止无限循环。。如何使其正常工作。

您正在调用setActive而不是传递函数：

onClick={() => setActive(i)}>

---

您正在调用setActive而不是传递函数：

onClick={() => setActive(i)}>

---

多蠢的错误，谢谢我没有游：）多蠢的错误，谢谢我没有游：）