使用React Scroll滚动时报TypeError: setScrollNav is not a function错误求解

错误根因 #

• 你对useState钩子的返回值用法有误：useState执行后会返回长度为2的数组，第一个元素为状态值，第二个元素才是状态更新函数，你当前的代码直接将整个返回数组赋值给了setScrollNav，导致该变量是数组而非函数，调用时自然抛出类型错误。
• 对比你上方showNav的声明逻辑就可以发现差异：你给showNav写了解构赋值，但是setScrollNav的声明漏掉了解构步骤。

修正方案 #

将setScrollNav的声明改为标准的useState解构写法即可，同时可以优化冗余依赖：

export default function Navbar() {
    const [showNav, setShowNav] = useState(false);
    // 修正：解构拿到状态更新函数setScrollNav
    const [scrollNav, setScrollNav] = useState(false);

    useEffect(() => {
        function changeNav() {
            // 这里可以直接简写为布尔表达式，不用if/else
            setScrollNav(window.scrollY >= 100)
        }
        window.addEventListener('scroll', changeNav)
        return () => window.removeEventListener('scroll', changeNav)
    }, []) // 优化：React保证setScrollNav引用永远稳定，无需放入依赖数组
    // 原有return逻辑保持不变即可
}

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