如何解决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) 的登录方法的回调。
我得到的错误是: 错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的:
- 您的 React 和渲染器版本可能不匹配(例如 React DOM)
- 你可能违反了钩子规则
- 您可能在同一个应用中拥有多个 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。