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

问题描述

我使用的是 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. 你可能违反了钩子规则
3. 您可能在同一个应用中拥有多个 React 副本 有关如何调试和解决此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

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

感谢您的帮助。

解决方法

您的 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;