子组件使用useContext触发Invalid hook call错误，求排查Hook规则问题

你的代码触发Invalid hook call错误的核心原因是违反了React组件命名规则，进而导致Hook调用不符合规范：

• React明确要求自定义组件名称必须以大写字母开头。你定义的组件是小写的item，React会将其识别为原生HTML标签，而非自定义React组件。
• 当React把<item/>当作原生标签处理时，里面的useContext Hook就不是在React组件的顶层调用了，这直接违反了Hook的核心规则——Hook必须在React函数组件的顶层或自定义Hook中调用。

修正后的代码 #

import AppContext from "./Context";
import { useContext } from 'react'; // 补充缺失的useContext导入

// 组件名改为大写开头
const Item = () => {
  const { Verified } = useContext(AppContext);

  return (<>...</>);
};

export default function SubPage() {
 return (
    ...
    <Item /> // 渲染时使用大写的组件名
 );
}

额外提醒：你的原始代码还漏掉了useContext的导入语句，这也是需要补充的细节。

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