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-hook）。

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

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call了解有关如何调试和解决此问题的提示。

我想我一定在某个地方违反了 Hooks 规则……但是是哪一个呢？

感谢您的帮助。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;