React useState默认状态问题：点击后才添加未点击类

你的核心问题在于初始状态下ClickedRegion是空字符串，导致所有区域默认都被加上了not-clicked类。要实现只有用户点击过某个区域后，未点击的元素才添加not-clicked，只需要调整类名的判断逻辑：

修改后的代码 #

function MapComponent() {
  const [clickedRegion, setClickedRegion] = useState("");

  function handleClick(event, region) {
    event.preventDefault();
    setClickedRegion(region);
  }

  // 把区域数据抽成数组，避免重复代码（可选，但更简洁）
  const regions = [
    { name: "Australia", path: "..." },
    { name: "Europe", path: "..." },
    { name: "Asia", path: "..." }
  ];

  return (
    <svg version="1.1" id="World" height="100vh" viewBox="0 0 1920 1080">
      {regions.map(({ name, path }) => (
        <a key={name} href={`/${name}`} title={name} className="nav-link">
          <path
            id={name}
            className={`svg ${
              clickedRegion === name 
                ? "clicked" 
                : clickedRegion ? "not-clicked" : ""
            }`}
            onClick={(event) => handleClick(event, name)}
            d={path}
          />
        </a>
      ))}
    </svg>
  );
}

关键逻辑说明 #

• 初始状态clickedRegion为空时，所有区域只保留基础的svg类，没有额外的clicked或not-clicked
• 当用户点击某个区域后，clickedRegion被赋值为对应区域名称：
  • 被点击的区域添加clicked类
  • 其他区域因为clickedRegion有值，会添加not-clicked类

额外优化点 #

1. 把区域数据抽成数组用map渲染，减少重复代码，后续新增区域只需要在数组里添加数据即可
2. 变量名改成小驼峰（clickedRegion），符合React的命名规范

内容的提问来源于stack exchange，提问作者Louis Eiden