React首次点击按钮状态未即时更新，切换显示功能异常求助

问题根源 #

1. 普通变量无法持久化状态：原代码中用let length = 0记录点击次数是错误的——React组件每次渲染都会重新初始化这个变量，无法保留上一次的点击计数，导致逻辑判断完全失效。
2. 状态切换逻辑错误：初始open状态为false，首次点击时length === 0，执行setOpen(false)，状态无变化，文本不显示；第二次点击时length在本次函数执行中临时变为1，执行setOpen(true)才显示文本，但组件重新渲染后length又重置为0，第三次点击直接执行setOpen(false)隐藏文本，最终出现“两次点击显示、一次点击隐藏”的异常。

正确解决方案 #

核心思路是直接对状态取反，不需要额外计数变量，完全利用React的状态管理实现切换逻辑：

基础实现

import React, { useState } from "react";

const App = () => {
  const [open, setOpen] = useState(false);
  
  const handleOpen = () => {
    // 直接取反当前状态，实现显示/隐藏切换
    setOpen(!open);
  };
  
  return (
    <>
      {open && <div> I am visible </div>}
      <button onClick={handleOpen}> change visibility </button>
    </>
  );
};

export default App;

函数式更新（推荐用于依赖前序状态的场景）

如果状态更新依赖之前的状态值（比如在异步操作中），使用函数式更新可以确保基于最新的状态进行修改：

const handleOpen = () => {
  // 接收前序状态作为参数，返回新状态
  setOpen(prevOpen => !prevOpen);
};

效果说明 #

• 首次点击按钮：open从false变为true，文本显示
• 再次点击按钮：open从true变为false，文本隐藏
• 后续点击循环往复，完全符合需求

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