React Admin自定义登录页面和React Hook

Question

我使用的是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;

UseLogin是对Reac Admin 3.14 authProvider的登录方法的回调(https://marmelab.com/react-admin/doc/3.14/Authentication.html#uselogin-挂钩(。

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

1. React和渲染器的版本可能不匹配(例如React DOM(
2. 你可能违反了胡克规则
3. 同一应用程序中可能有多个React副本看见https://reactjs.org/link/invalid-hook-call有关如何调试和修复此问题的提示

我想我一定在某个地方违反了钩子规则。。。但是哪一个？

谢谢你的帮助。C

Answer 1

您的useLogin和useNotify未执行

将const login = useLogin更改为const login = useLogin()

将const notify = useNotify更改为const notify = useNotify()

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;