React中prevState用法疑问，useState更新状态出错如何解决？

React 的状态更新默认是批量异步执行的，当你的新状态值需要依赖上一次状态的最新结果时，就需要使用函数式更新的写法，prevState 就是这个更新回调函数的入参，本质是 React 主动传入的上一轮状态的最新值，参数名可以自定义，行业约定俗成命名为 prevXxx 格式（比如状态叫toggleClass，参数就叫prevToggleClass）。

• 核心适用场景：新状态依赖旧状态的最新值，比如开关切换、数值累加、列表新增/删除元素等场景，避免直接读取状态变量拿到过期值的问题。
• 基础语法示例：

// 布尔值切换
const [toggle, setToggle] = useState(false)
setToggle(prevState => !prevState)

// 计数器累加
const [count, setCount] = useState(0)
setCount(prevState => prevState + 1)

当前代码的核心问题是没有声明 prevState 变量就直接调用，属于语法错误。结合切换登录注册表单显示的需求，修正后的完整代码如下：

import { useState } from 'react'
// 注意确保已经正确引入SignIn、SignUp组件
export default function SignInUp(props) {
  const [toggleClass, setToggleClass] = useState(false)
  const { handleLogin, handleRegister } = props

  const toggleState = () => {
    // 改用函数式更新，拿到上一次的状态值取反
    setToggleClass(prevState => !prevState)
  }

  return (
    <div className='UserContainer' style={{display: "grid", justifyContent: "center ", height: "100vh", width: "100vw"}}>
      <div className='btncontainer' style={{gridRow: "2 / 3"}}>
        <button onClick={toggleState} className='togglebtn' style={{background: "none", border: "none"}}>Signin</button>
        <button onClick={toggleState} className='togglebtn' style={{background: "none", border: "none"}}>Signup</button>
      </div>
      {/* 修正显示逻辑：toggleClass为true时隐藏登录表单，反之显示 */}
      <SignIn handleLogin={handleLogin} className={toggleClass ? 'Disabled' : ''} style={{gridRow: "2 / 3" }}/>
      {/* 修正显示逻辑：toggleClass为false时隐藏注册表单，反之显示 */}
      <SignUp handleRegister={handleRegister} className={!toggleClass ? 'Disabled' : ''}/>
    </div>
  )
}

额外说明：原代码中两个表单的禁用逻辑一致，会出现同时显示/隐藏的问题，上述代码也同步修正了该逻辑，确保点击按钮时只会展示一个表单。

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