React 中 useState 点击状态不更新的常见陷阱：赋值与比较混淆-js教程-PHP中文网

React 中 useState 点击状态不更新的常见陷阱：赋值与比较混淆

本文详解 React useState 在事件处理中因误用赋值运算符 = 替代比较运算符 === 导致状态切换失效的问题，并提供正确写法、最佳实践及调试建议。

本文详解 react usestate 在事件处理中因误用赋值运算符 `=` 替代比较运算符 `===` 导致状态切换失效的问题，并提供正确写法、最佳实践及调试建议。

在使用 React.useState 实现布尔式状态切换（如“Yes”/“No”）时，一个看似微小却极易引发 bug 的错误是：在 setState 的函数式更新回调中，误将严格相等比较（===）写成赋值操作（=）。这会导致逻辑永远返回 true，从而使状态无法按预期翻转。

以原始代码为例：

function changeState() {
  setisGoingOut(prevValue => {
    return prevValue = "Yes" ? "No" : "Yes"; // ❌ 错误：= 是赋值，不是比较！
  });
}

这段代码实际执行的是：

将字符串 "Yes" 赋值给 prevValue（即 prevValue 变为 "Yes"）；
然后判断该赋值表达式的返回值（即 "Yes"）是否为真值 → 恒为 true；
因此永远返回 "No"，造成“点击 No 无反应”的假象——其实每次点击都把 prevValue 强制重设为 "Yes"，再取反为 "No"。

✅ 正确写法应使用严格相等比较 ===：

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

function changeState() {
  setisGoingOut(prevValue => {
    return prevValue === "Yes" ? "No" : "Yes"; // ✅ 正确：比较而非赋值
  });
}

更进一步，推荐使用布尔类型管理此类二元状态，语义更清晰、不易出错：

export default function App() {
  const [isGoingOut, setIsGoingOut] = React.useState(true); // true 表示 "Yes"

  const toggleGoingOut = () => {
    setIsGoingOut(prev => !prev); // ✅ 简洁、安全、不可变
  };

  return (
    <div classname="state">
      <h1 classname="state--title">Do I feel like going out tonight?</h1>
      <div classname="state--value" onclick="{toggleGoingOut}">
        <h1>{isGoingOut ? "Yes" : "No"}</h1>
      </div>
    </div>
  );
}

⚠️ 注意事项：