Блог

У меня есть функция для отображения навигации на панели инструментов пользователя. Эта функция должна установить активную функцию для этого элемента, по умолчанию используется 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>
  );
};
 

Когда он выполняется, я получаю слишком много повторных рендеров. React ограничивает количество отображений, чтобы предотвратить бесконечный цикл.Как я могу исправить это, чтобы оно работало.

Вы вызываете SetActive вместо передачи функции:

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