React JS出现Invalid Hook调用错误如何排查修复？附相关代码

云原生阿岚

2026-9-30

React Invalid Hook调用报错排查修复

触发错误的具体原因

函数组件命名违规：React要求自定义组件名必须以大写字母开头，当前代码中组件名为chatcreate（首字母小写），React会将其判定为普通HTML标签而非函数组件，内部调用Hook自然不符合规则。
Hook调用语法错误：代码中var idref = useRef仅将useRef函数本身赋值给变量，没有执行调用，Hooks必须以函数调用的形式（useRef()）执行才符合规范。

修复后的完整代码

import { useRef } from 'react';
import {Container, Form} from 'react-bootstrap';

// 组件名首字母大写，符合React组件命名规范
export default function ChatCreate() {
    // 调用useRef生成ref对象，可传入null作为初始值
    const idref = useRef(null)

    return (
        <Container>
            <Form>
                <Form.Group>
                    <Form.Label>Enter your id</Form.Label>
                    <Form.Control type='text' ref={idref} required />
                </Form.Group>
            </Form>
        </Container>
    )
}