React+Electron应用无效Hook调用错误排查求助

你遇到的Hook调用错误，核心原因是没有用JSX语法渲染组件，而是直接调用了组件函数，这违反了React Hook的调用规则。

错误点分析 #

在root.tsx中，你直接调用DataComponent()和head()，这种方式相当于执行普通函数，而非让React创建组件实例。React的Hook（比如useState、useEffect）只能在React组件的顶层调用，直接调用函数时，Hook不在React的组件上下文里，因此触发错误。

另外在app.tsx里，root.render(base())也是同样的问题：直接调用base()返回的是JSX元素，但没有通过React的组件渲染流程处理，虽然base自身没有Hook，但这种写法会破坏子组件的上下文环境。

修改后的代码 #

root.tsx #

import React from 'react';
import Head from './head'; // 组件首字母大写，符合React规范
import changelog from './changelog';
import DataComponent from './datacomp'

export default function Base() { // 组件首字母大写
    return (
        <> 
            <Head /> {/* 用JSX标签渲染组件 */}
            {/* {changelog()}  */}
            <DataComponent /> {/* 用JSX标签渲染组件 */}
        </>
    );
}

app.tsx #

import React from 'react';
import { createRoot } from 'react-dom/client';

import Base from './partials/root'; // 对应修改后的组件名

const root = createRoot(document.body);
root.render(<Base />); // 用JSX标签渲染根组件

额外提示 #

• React组件建议首字母大写，这是React识别组件的约定，避免和HTML标签混淆。
• 若head.tsx是React组件（返回JSX），同样要改成<Head />的方式渲染。

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