React & Typescript中Invalid Hook Call报错求助

从你提供的报错栈来看，问题大概率出在ResultsPage组件的调用方式上，结合报错信息里提到的_callee$ (main.tsx:40:67)，先重点排查这几点：

1. 检查组件是否被当成普通函数在异步逻辑中调用 #

如果在main.tsx的异步函数（比如fetch数据的回调）里直接执行ResultsPage({x, y})这种写法，而不是用JSX语法<ResultsPage x={x} y={y} />渲染，就会触发这个错误。React组件必须作为JSX元素被渲染，而不是像普通函数一样直接调用——直接调用会让Hook脱离React的组件生命周期上下文。

错误示例：

async function loadData() {
  const res = await fetch('/api/data');
  const data = await res.json();
  // 错误：直接调用组件函数
  ResultsPage({x: data.x, y: data.y});
}

正确示例：

function Main() {
  const [data, setData] = useState<{x: any, y: any} | null>(null);

  async function loadData() {
    const res = await fetch('/api/data');
    const data = await res.json();
    setData(data);
  }

  return (
    <div>
      {/* 正确：用JSX渲染组件 */}
      {data && <ResultsPage x={data.x} y={data.y} />}
    </div>
  );
}

2. 确认React与React DOM版本一致 #

打开你的package.json，检查react和react-dom的版本号是否完全匹配，比如不能一个是18.2.0另一个是17.0.2。如果版本不匹配，会导致Hook的内部调度逻辑冲突。

可以用命令查看依赖树，确认是否有重复的React包：

# npm用户
npm ls react react-dom

# yarn用户
yarn list react react-dom

如果发现多个版本的React，需要清理依赖，确保项目中只有一份React依赖。

3. 再次确认组件内部是否遵守Hook规则 #

虽然你提供的ResultsPage代码看起来符合规则（useState在组件顶层），但要确保：

• 没有在if/else、循环、嵌套函数中调用Hook
• 组件确实是作为函数组件导出（不是类组件，也不是普通函数）

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