React中Hook触发‘invalid hook call’报错的问题排查与解决

问题描述 #

开发调用Reddit API的Web应用时，使用下拉菜单筛选帖子触发了Hook错误提示：

Invalid hook call. Hooks can only be called inside of the body of a function component

相关代码如下：

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import validate from '../../app/login';
import './Header.css';

export default function Header() {
    const [view, setView] = useState('popular');
    const navigate = useNavigate;

    useEffect(() => {
        navigate(`/${view}`);
    }, [view]);

    function handleChange(e) {
        setView(e.target.value);
    };

    return (
        <div className='Header' role='Header'>
            <span className='header-left'>
                <h1>RedditLite</h1>
                <label htmlFor='mode-select'>View Mode: </label>
                <select name='mode-select' id='mode-select' onChange={(e) => handleChange(e)}>
                    <option value='popular' selected>Most Popular</option>
                    <option value='communities'>By Community</option>
                    <option value='profile'>By Profile Category</option>
                </select>
            </span>
            <input
                type='text'
                id='searchbar'
                name='searchbar'
                placeholder='Search RedditLite'
            />
            <span className='header-right'>
                <h3 role='button' onClick={validate}>Login</h3>
            </span>
        </div>
    );
}

错误原因 #

你并没有在事件处理函数中违规调用Hook，真正问题是**useNavigate的调用方式错误**：

• useNavigate是React Router提供的Hook，必须以函数调用的方式获取导航函数，即const navigate = useNavigate();
• 你的代码中写成了const navigate = useNavigate;，这只是把Hook函数本身赋值给了navigate变量，并没有执行Hook。后续在useEffect中调用navigate()时，相当于在非函数组件顶层的环境中间接调用了Hook，违反了Hook只能在函数组件的顶层作用域直接调用的规则，从而触发错误。

修正后的代码 #

只需修正useNavigate的调用方式：

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import validate from '../../app/login';
import './Header.css';

export default function Header() {
    const [view, setView] = useState('popular');
    // 修正：调用useNavigate Hook获取导航函数
    const navigate = useNavigate();

    useEffect(() => {
        navigate(`/${view}`);
    }, [view]);

    function handleChange(e) {
        setView(e.target.value);
    };

    return (
        <div className='Header' role='Header'>
            <span className='header-left'>
                <h1>RedditLite</h1>
                <label htmlFor='mode-select'>View Mode: </label>
                <select name='mode-select' id='mode-select' onChange={(e) => handleChange(e)}>
                    <option value='popular' selected>Most Popular</option>
                    <option value='communities'>By Community</option>
                    <option value='profile'>By Profile Category</option>
                </select>
            </span>
            <input
                type='text'
                id='searchbar'
                name='searchbar'
                placeholder='Search RedditLite'
            />
            <span className='header-right'>
                <h3 role='button' onClick={validate}>Login</h3>
            </span>
        </div>
    );
}

总结 #

React Hook的核心规则之一是只能在函数组件的顶层直接调用Hook，不能在嵌套函数、循环、条件判断或普通函数中调用。本次错误是因为未正确执行Hook函数，导致后续操作间接违反了这条规则。

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