React useState切换器触发重渲染后状态重置为false问题求助

你的问题不是组件重渲染导致状态重置，而是点击a标签触发了页面刷新——<a href="">的默认行为是跳转当前页面（空路径会触发刷新），页面刷新后整个React应用重新挂载，所有组件状态都会回到初始值，所以toggle被重置为false。

有两种简单的修复方式：

1. 阻止a标签的默认跳转行为 #

修改点击事件，添加preventDefault()阻止页面刷新：

<a href="" onClick={(e) => {
  e.preventDefault();
  setToggle();
}}>Not yet signed up? Register here</a>

2. 替换为语义化的按钮元素 #

这个元素的作用是触发交互而非跳转，用<button>更符合语义，也不用处理默认跳转：

<button onClick={setToggle} style={{ 
  background: 'none', 
  border: 'none', 
  color: 'blue', 
  textDecoration: 'underline', 
  cursor: 'pointer' 
}}>
  Not yet signed up? Register here
</button>

（可以通过外部CSS替代内联样式，让按钮外观和链接一致）

你的useToggle Hook逻辑完全没问题——它基于React的useState维护状态，只要组件没有被卸载重挂载，状态就会被正确保留。之前的状态重置完全是页面刷新导致的组件重新初始化，和Hook本身无关。

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