ReactJS点击按钮隐藏元素：useState状态重置问题求解

你遇到的核心问题是状态被意外重置，大概率是这两个原因之一，对应解决方案如下：

1. 按钮触发了表单默认提交行为 #

如果你的按钮放在<form>标签内部，点击按钮会默认触发表单提交，导致整个页面刷新，所有组件重新初始化，状态自然回到初始值true。

解决方法：在点击事件里阻止默认行为：

<button onClick={(e) => {
  e.preventDefault(); // 阻止表单提交刷新页面
  setTextVisibility(false);
}}>隐藏文本</button>

2. 组件被意外重新挂载 #

如果组件被父组件的条件渲染逻辑影响（比如父组件的key值不稳定，或者组件被卸载后又重新挂载），也会导致状态重置。

• 检查父组件中是否给当前组件设置了动态变化的key（比如用Math.random()生成key），换成固定的标识值；
• 确认组件没有被不必要的条件渲染卸载，比如不要把组件放在{someCondition && <YourComponent />}里，除非someCondition确实需要控制组件挂载。

完整可用示例 #

import { useState } from 'react';

function ToggleText() {
  const [textVisibility, setTextVisibility] = useState(true);

  return (
    <div>
      {/* 条件渲染文本 */}
      {textVisibility && <p>点击按钮我就会消失</p>}
      {/* 普通按钮（非表单内） */}
      <button onClick={() => setTextVisibility(false)}>隐藏文本</button>
    </div>
  );
}

export default ToggleText;

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