我正在React中构建一个简单的登录系统，我试图允许用户输入电子邮件和密码登录，只有在此登录数据保存到会话存储之后。电子邮件和密码成功存储在会话存储中，但页面没有刷新&my-account.js中的后续return{}函数不渲染。
我对这段代码如何工作的理解:
-
'useToken()'钩子包含一个状态对象，函数'getToken()'和状态变量'token'，状态由'useState(getToken())'决定-它将'token'的状态设置为名为'token'的会话存储变量。
-
useToken()被导入到my-account.js中，'token'和'setToken()'都是从父函数中解构的，在my-account组件中检索正确的数据。
'useToken()'函数没有设置'token'，当它应该返回成功存储在会话存储中的令牌时，它返回null。如果你能帮我解决这个问题，我会很感激的。
//my-account.js
import React from 'react';
import Login from "../components/login"
import useToken from "../hooks/useToken"
const MyAccount = () =>{
const { token, setToken } = useToken();
if(!token) {
return <Login setToken={setToken} />
}
return (
<div>
<div>
<h1>{token.email ? `Logged in as ${token.email}` : 'Not logged in'}</h1>
</div>
</div>
);
}
export default MyAccount;
//useToken.js
import { useState } from 'react';
export default function useToken() {
const getToken = () => {
const tokenString = localStorage.getItem('token');
const userToken = JSON.parse(tokenString);
return userToken;
};
const [token, setToken] = useState(getToken());
const saveToken = (userToken) => {
localStorage.setItem('token', JSON.stringify(userToken));
setToken(userToken);
};
return {
setToken: saveToken,
token,
}
}
//login.js
const Login = ({setToken}) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isLoggingIn, setIsLoggingIn] = useState(false);
const [error, setError] = useState(null);
Login.propTypes = {
setToken: PropTypes.func.isRequired
}
const handleSubmit = async (event) => {
event.preventDefault();
setIsLoggingIn(true);
try {
const { data } = await axios.get("http://localhost:3001/users", { email, password });
console.log(data);
const user = data.find(
(user) => user.email === email && user.password === password
);
if (user) {
console.log("user is found");
// set token to store pass as a prop to store login data in local memory
var token = user;
console.log(token);
setToken(token);
setError(false);
setIsLoggingIn(false);
} else {
setError(new Error("Incorrect email or password"));
setIsLoggingIn(false);
}
} catch (error) {
setError(error);
setIsLoggingIn(false);
}
};
return (
<form onSubmit={handleSubmit} className="login-container">
{error && <div className="error">{error.message}</div>}
<label htmlFor="email">Email:</label>
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<br />
<label htmlFor="password">Password:</label>
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
<br />
<>
<button className="fancyButton defaultBtn" type="submit" disabled={isLoggingIn}>
{isLoggingIn ? 'Logging in...' : 'Log In'}
</button>
</>
<p>If you do not have an account, register <Link to="/register">here</Link></p>
</form>
);
}
export default Login;
问题一定在<Login>
我做了一个本地副本，它工作得很好。这是我的Login.js
function Login({ setToken }) {
setToken("test");
return <div></div>;
}
export default Login;