State 似乎未在重新渲染时更新

Question

I have tried to build a simple side bar component where the clicked link has a class attribute of active . I have used useState to contain the ID of the clicked component as shown below, but the active link's class attribute is not being updated. My understanding is that when I update the state via handleClick then a rerender should occur, and my newly built links should now have the correct class attributes as accessed via the state. Why is this not working?

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const SideBar = function () {

  const [activeLink, setActiveLink] = useState('nav-link-/');

  const linkConfig = [
    ['/', 'Home'],
    ['userAccount', 'Your Account'],
  ];

  const handleClick = (event) => {
    setActiveLink(event.target.getAttribute('id'));
  };

  const getLinkClass = (id) => {
    return id === activeLink ? 'active' : '';
  };

  const buildLinks = (config) => {
    return config.map((link) => {
      const id = `nav-link-${link[0]}`;
      return (<Link to={link[0]} key={link[0]}>
        <li id={id} className={getLinkClass(id)} onClick={handleClick}>
          {link[1]}
        </li>
      </Link>);
    });
  };

  return (
    <div className="side-bar">
      <ul>
        {buildLinks(linkConfig)}
      </ul>
    </div>
  );
};

export default SideBar;

Answer 1

It's a bit hard to guess, but on an EventTarget, there is no "setAttribute"-Property. Try using "event.target.id" in the handleClick-Function.