React应用部分Route组件出现Invalid hook call错误排查

问题描述 #

使用Docker化的React+Express+Nginx技术栈，在React Router v6路由配置中出现Hook调用异常：

• /salas/ 路径对应的RoomsScreen组件调用自定义Hook useGetRooms时触发Invalid hook call错误
• /sala/:id 路径对应的RoomScreen组件调用Hook完全正常

已完成排查：

• package.json依赖版本无异常
• 确认使用函数组件
• 已将Hook调用放在组件顶层位置
• 在RoomList子组件中调用该Hook可正常运行，但需求是在RoomsScreen组件中使用

相关代码 #

RoomsScreen组件

function RoomsScreen() {
    const { rooms, loading, error, fetchRooms } = useGetRooms();

    const handleRefresh = () => {
        //should refresh RoomList
    }

    return (
        <>
            <Header title="Salas" visible={true} handleRefresh={handleRefresh} />
            <RoomList rooms={rooms} loading={loading} />
            <div className="flex-row m-1">
                <LinkButton text="Criar Sala" to="/criar-sala" useBackground={true} />
            </div>

        </>
    )
}

自定义Hook useGetRooms

const useGetRooms = () => {
    const [rooms, setRooms] = useState([]);       // 此处触发Invalid hook call错误
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const fetchRooms = async () => {
        try {
            const response = await getRequestWithFetch("/api/room");
            setRooms(response.rooms);
        } catch (err) {
            setError(err);
        } finally {
            setLoading(false);
        }
    };

    return { rooms, loading, error, fetchRooms };
};

问题分析与解决方案 #

1. 路由配置错误（组件被当作普通函数执行） #

检查App.jsx的路由配置，大概率是/salas/的路由错误地直接调用了RoomsScreen函数，而非以组件标签形式传入：

• 错误写法：

<Route path="/salas/" element={RoomsScreen()} />

• 正确写法：

<Route path="/salas/" element={<RoomsScreen />} />

直接调用函数会让RoomsScreen以普通函数身份执行，而非React组件，违反了Hook只能在React函数组件/自定义Hook中调用的规则；而/sala/:id的路由如果是用组件标签渲染，就不会触发该问题。

2. 重复安装React或版本不一致 #

Docker环境可能存在多层依赖导致React被重复安装，执行以下命令检查依赖树：

npm ls react react-dom

如果出现多个React版本，删除项目根目录的node_modules和package-lock.json，重新执行npm install。

3. Hook导出/导入错误 #

确认useGetRooms的导出方式与RoomsScreen中的导入方式匹配：

• 命名导出示例：

// 导出
export const useGetRooms = () => { ... }
// 导入
import { useGetRooms } from './path/to/hooks';

• 默认导出示例：

// 导出
export default useGetRooms;
// 导入
import useGetRooms from './path/to/hooks';

验证顺序 #

优先检查路由配置，其次排查依赖重复问题，最后确认Hook的导入导出逻辑。

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