点击导航栏Skills时，状态切换与锚点跳转无法同时生效的问题

问题场景 #

点击导航栏的「Skills」按钮时，状态切换功能正常，但页面无法跳转到对应id="skills"的锚点区域，单独使用状态切换或锚点跳转均正常。

问题原因 #

React的状态更新是异步操作，触发状态更新时会引发组件重渲染，可能中断<a>标签的默认锚点跳转行为；或是事件冒泡过程中，状态更新的执行逻辑干扰了浏览器的跳转动作。

可行解决方案 #

方案1：手动控制锚点滚动（推荐）

移除<a>标签的href属性，在点击事件处理函数中同时完成状态更新和手动滚动到目标元素，避免默认行为与状态更新冲突：

// 导航栏代码
// 若使用全局状态，从context获取状态更新方法；若用局部状态则保留自己的setter
const { setSkillsClicked } = useGlobalContext();

const handleClickSkills = () => {
  // 用函数式更新确保状态切换准确
  setSkillsClicked(prevState => !prevState);
  // 手动定位并滚动到锚点元素
  const targetElement = document.getElementById('skills');
  if (targetElement) {
    targetElement.scrollIntoView({
      behavior: 'smooth', // 可选：开启平滑滚动
      block: 'start' // 滚动到元素顶部位置
    });
  }
};

// 渲染部分
<a onClick={handleClickSkills}>
  <li>Skills</li>
</a>

方案2：绑定点击事件到<a>标签保留默认行为

将点击事件直接绑定到<a>标签上，确保默认跳转行为不受状态更新的干扰：

// 导航栏代码
const { setSkillsClicked } = useGlobalContext();

const handleClickSkills = (e: React.MouseEvent<HTMLAnchorElement>) => {
  // 先更新状态，不阻止<a>的默认跳转行为
  setSkillsClicked(prevState => !prevState);
};

// 渲染部分
<a href="#skills" onClick={handleClickSkills}>
  <li>Skills</li>
</a>

注意事项 #

• 确认目标元素id="skills"已正确渲染在DOM中，未被设置为display: none或visibility: hidden，否则滚动操作无法生效。
• 若使用全局状态管理，确保导航栏中使用的是全局context提供的状态更新方法，而非局部useState，避免出现状态不一致的情况。

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