为什么 React hook useRef 使用时会报错？

Question

错误
这是网页浏览器中显示的错误。

Compiled with problems:X

ERROR


src\components\SignIn.js
  Line 5:21:  React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

SignIn.js
我的代码中使用 React 钩子 useRef 的部分。

import React, { useRef } from 'react'
import { Card, Button, Form } from 'react-bootstrap'

export default function signin() {
    const userRef = useRef()

    return (
        <>
            <Card>
                <Card.Body>
                    <h2 className='text-center mb-4'>Magnet</h2>
                    <Form>
                        <Form.Group id="username">
                            <Form.Label>Username</Form.Label>
                            <Form.Control type='text' ref={userRef} required />
                        </Form.Group>
                    </Form>
                </Card.Body>
            </Card>
        </>
    )
}

Answer 1

不能在普通函数中调用钩子，必须从钩子或函数组件中调用。

export default function signin()

以上命名约定均未提及。更改为 Signin。事实上，错误消息解释了这一点。

Answer 2

您的错误已有答案

Line 5:21:  React Hook "useRef" is called in function "signin" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"  react-hooks/rules-of-hooks

您应该使用 Signin

更改组件名称

为什么 React hook useRef 使用时会报错？

Why does the React hook useRef throw an error when used?

javascript

reactjs

react-hooks

use-ref