React Hooks实现toggle组件点击仅能展开无法关闭问题排查

核心问题 #

• 你的点击处理函数handleClick每次触发都固定将loan状态设为true，没有切换真假值的逻辑，所以状态只会从初始的false变为true一次，后续点击再也不会改变状态，自然无法关闭组件。

修复代码 #

import { useState } from 'react'
// 原代码漏了useState导入，实际运行会报错，此处已补充
export default function Shiva() {
    const [loan, setLoan] = useState(false);
    const handleClick = () => {
        // 切换逻辑：每次点击取当前状态的相反值
        setLoan(prev => !prev);      
    }
    return (
        <div className="">
            <div className="">
                <div className="loan-type-select" onClick={handleClick}>
                    <div className="">
                        <img src="" alt="贷款图标" />
                    </div>
                    <p>SBA 7A Loan</p>
                    {loan ? <Data /> : null }
                </div>
            </div>
        </div>
    )
}

额外优化提示 #

• 原代码条件渲染的空字符串''可以换成null，是React中条件不满足时不渲染的更规范写法
• 注意补充img标签的alt属性，避免触发可访问性告警
• 不要遗漏useState的导入语句，否则运行时会抛出未定义错误

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