为何在高阶组件(HOC)中使用useState Hook会导致组件无法渲染？

核心错误原因 #

你写的HOC违反了React Hook的核心规则：Hook只能在React函数组件的顶层，或者自定义Hook的顶层调用。

当前你的WithAccessControl是一个普通函数，直接在这个函数内部调用useState，完全不符合Hook的调用要求。React无法在非组件/非自定义Hook的环境中追踪Hook状态，最终导致组件无法正常渲染，甚至没有明确的控制台错误（Webpack热更新逻辑先触发了异常）。

错误代码分析 #

你的HOC当前写法：

import React from "react";

const WithAccessControl = (Component: React.FC) => {
    debugger;
    [state, setState] = React.useState(); // 直接在普通函数里调用Hook，违反规则
    return Component;
};

export default WithAccessControl;

这个写法只是把传入的组件直接返回，且错误地在普通函数中调用Hook，完全不符合HOC的正确结构。

正确的HOC写法 #

HOC应该返回一个新的React函数组件，在这个新组件内部调用Hook，然后渲染传入的目标组件并传递props：

import React, { useState } from "react";

const WithAccessControl = (Component: React.FC) => {
    // 返回新的组件函数，在组件内部调用Hook
    return (props) => {
        const [state, setState] = useState(); // 符合Hook调用规则
        // 可在此添加权限控制逻辑，比如根据state判断是否渲染组件
        return <Component {...props} />;
    };
};

export default WithAccessControl;

为什么不用useState时能工作？ #

因为那时你的HOC只是一个简单的高阶函数，单纯返回传入的组件，没有触发任何Hook规则的违反，所以React可以正常渲染目标组件。

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