React中if else语句两次返回true 隐藏按钮需点击两次生效问题

bug出在你用普通局部变量存储显隐标记，不符合React的状态驱动渲染规则：

• 函数组件每次重渲染都会从头执行整个函数逻辑，你写在组件顶层的let visible = false会在每次重渲染时重新执行，直接把visible重置为false
• 首次点击「Show details」时，初始visible为false，走展示分支：设置详情内容、把按钮文本改为「Hide details」、局部变量visible赋值为true，状态更新后触发组件重渲染
• 重渲染完成后，visible被重新初始化回false，此时页面上虽然显示「Hide details」按钮和展开的详情，但函数作用域内的visible实际是false
• 第一次点击「Hide details」时，判断条件if(visible)为假，会再次进入展示分支，重复执行显示逻辑，不会触发隐藏；这次执行完局部变量visible才被设为true，第二次点击才能进入隐藏分支，这就是需要点两次的原因。
• 额外问题：你把强关联的视图逻辑拆成了多个独立状态，还混用局部变量，非常容易出现状态不同步的问题，这类可以由核心状态推导出来的内容，不需要单独存为状态。

只保留一个核心显隐状态即可，按钮文本、详情内容直接根据这个状态派生，从根源避免状态不一致：

import React, { useState } from 'react'

const Playground2 = () => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(prev => !prev);
  }

  return (
    <>
      <section>
        <div className="container">
          <h1>Visibility Toggle</h1>
          <button onClick={toggleVisibility}>
            {isVisible ? "Hide details" : "Show details"}
          </button>
          {isVisible && <p>Here are some details</p>}
        </div>
      </section>
    </>
  )
}

export default Playground2

如果需要保留详情内容为独立状态，只要把visible改为useState管理的状态即可，禁止用普通局部变量存储会影响视图渲染的标记值。

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