Reactjs React管理员自定义登录页面和React挂钩

我正在使用React Admin 3.14，我希望有一个自定义登录页面。当我在useLogin钩子中使用下面的一个钩子时，我有一个与钩子相关的错误，我无法理解

import React from 'react';
import { useLogin,useNotify } from 'react-admin';
import Button from '@material-ui/core/Button'


const LoginPage = () => {
    const HandleClick = () => {
        console.log('Clicked login ...');
        
        const login = useLogin;
        const notify = useNotify;
    
        login({ username:'john', password:'doe' }).catch(() => notify("Invalid email or password"));    
    }

    return(       
        <Button variant="contained" onClick={HandleClick}>Login</Button>       
    );
}

export default LoginPage;

从“React”导入React；
从“react admin”导入{useLogin，useNotify}；
从“@material ui/core/Button”导入按钮
常量登录页面=（）=>{
常量HandleClick=（）=>{
log（'Clicked login…'）；
const login=useLogin；
const notify=useNotify；
登录（{用户名：'john'，密码：'doe'}）.catch（（）=>notify（“无效的电子邮件或密码”）；
}
报税表（
登录
);
}
导出默认登录页面；

UseLogin是对Reac Admin 3.14 authProvider（）的登录方法的回调

我得到的错误是： 错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个React副本 有关如何调试和修复此问题的提示，请参阅

我想我一定在某处违反了钩子的规则。。。但是哪一个呢

谢谢你的帮助。

---

C

您的

useLogin

和

useNotify

未执行

将

const login=useLogin

更改为

const login=useLogin（）

将

const notify=useNotify

更改为

const notify=useNotify（）

从“React”导入React；
从“react admin”导入{useLogin，useNotify}；
从“@material ui/core/Button”导入按钮
常量登录页面=（）=>{
const login=useLogin（）；
const notify=useNotify（）；
常量HandleClick=（）=>{
log（'Clicked login…'）；
登录（{用户名：'john'，密码：'doe'}）.catch（（）=>notify（“无效的电子邮件或密码”）；
}
报税表（
登录
);
}
导出默认登录页面；

您的

useLogin

和

useNotify

未执行

将

const login=useLogin

更改为

const login=useLogin（）

将

const notify=useNotify

更改为

const notify=useNotify（）

从“React”导入React；
从“react admin”导入{useLogin，useNotify}；
从“@material ui/core/Button”导入按钮
常量登录页面=（）=>{
const login=useLogin（）；
const notify=useNotify（）；
常量HandleClick=（）=>{
log（'Clicked login…'）；
登录（{用户名：'john'，密码：'doe'}）.catch（（）=>notify（“无效的电子邮件或密码”）；
}
报税表（
登录
);
}
导出默认登录页面；

感谢您的反馈。实际上，它们必须在函数组件（）的顶层调用，这也是您所展示的。非常感谢-Christian@Christian68别忘了投票和打分，让人们知道这个问题已经解决了。谢谢你的反馈。实际上，它们必须在函数组件（）的顶层调用，这也是您所展示的。非常感谢-Christian@Christian68别忘了投票和打分，让人们知道这个问题已经解决了

import React from 'react';
import { useLogin,useNotify } from 'react-admin';
import Button from '@material-ui/core/Button'


const LoginPage = () => {
    const login = useLogin();
    const notify = useNotify();

    const HandleClick = () => {
        console.log('Clicked login ...');
                
        login({ username:'john', password:'doe' }).catch(() => notify("Invalid email or password"));    
    }

    return(       
        <Button variant="contained" onClick={HandleClick}>Login</Button>       
    );
}

export default LoginPage;