React useState状态异常：按钮需双击才切换状态求助

AI 小北

2026-7-14

解决React useState按钮文本切换需双击的问题

问题原因

你遇到的问题本质是状态更新没有基于最新的状态值计算。React的useState更新是异步批量处理的，如果你直接用当前状态值（比如buttonText）来判断切换，第一次点击后状态还没完成更新，第二次点击时拿到的还是旧状态，所以需要双击才能切回去。

正确写法示例

方式1：直接操作文本状态（函数式更新）

import { useState } from 'react';

function ToggleButton() {
  const [buttonText, setButtonText] = useState("Unclicked");

  const handleClick = () => {
    // 用函数式更新，接收前一次状态作为参数
    setButtonText(prevText => 
      prevText === "Unclicked" ? "Clicked" : "Unclicked"
    );
  };

  return <button onClick={handleClick}>{buttonText}</button>;
}

export default ToggleButton;

方式2：用布尔状态控制文本（更推荐，逻辑更清晰）

import { useState } from 'react';

function ToggleButton() {
  const [isClicked, setIsClicked] = useState(false);
  const buttonText = isClicked ? "Clicked" : "Unclicked";

  const handleClick = () => {
    // 基于前一次布尔状态取反
    setIsClicked(prevState => !prevState);
  };

  return <button onClick={handleClick}>{buttonText}</button>;
}

export default ToggleButton;