反应使用页面刷新后Reducer钩子状态丢失

Question

当用户成功登录时，它将身份验证状态从 null 更改为 true，并在登录主页后刷新页面时将其设置为 来自初始状态(身份验证状态.js(的默认状态值 我想在用户刷新页面后保持状态。我正在使用吊钩减速器

登录.js

import React, { useState, useContext, useEffect } from "react";
import AlertContext from "../../context/alert/alertContext";
import AuthContext from "../../context/auth/authContext";
const Login = props => {
const authContext = useContext(AuthContext);
const { login, isAuthenticated,loading } = authContext;
useEffect(() => {
if (isAuthenticated) {
props.history.push("/");
}
if (error === "Invalid Credentials") {
setAlert(error, "danger");
clearErrors();
}
// eslint-disable-next-line
}, [error, isAuthenticated, props.history]);
const [user, setUser] = useState({
email: "",
password: ""
});
const { email, password } = user;
const onChange = e => setUser({ ...user, [e.target.name]: 
e.target.value });
const onSubmit = e => {
e.preventDefault();
if (email === "" || password === "") {
setAlert("Please fill in all fields", "danger");
removeLoading();
} else {
login({
email,
password
});
}
};
return (
<div className="form-container">
<form onSubmit={onSubmit}>
<div className="form-group">
<label htmlFor="email">Email Address</label>
<input type="email" name="email" value={email} onChange={onChange}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
name="password"
value={password}
onChange={onChange}
/>
</div>
<input
type="submit"
value="Login"
className="btn btn-primary btn-block"
/>
</form>
</div>
);
};
export default Login;

身份验证状态.js

这是初始状态代码

const AuthState = props => {
const initialState = {
//token: localStorage.getItem("token"),
isAuthenticated: null,
loading: false,
user: null,
error: null
};

const [state, dispatch] = useReducer(authReducer, initialState);
// Load User
const loadUser = async () => {
if (localStorage.token) {
console.log(localStorage.token)
setAuthToken(localStorage.token);
}
try {
const res = await axios.get("/api/auth");
dispatch({ type: USER_LOADED, payload: res.data });
} catch (err) {
dispatch({ type: AUTH_ERROR });
}
};
// Login User
const login = async formData => {
const config = {
headers: {
"Content-Type": "application/json"
}
};
try {
const res = await axios.post("api/auth", formData, config);
//console.log(res.data)
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
});
loadUser();
} catch (err) {
dispatch({
type: LOGIN_FAIL,
payload: err.response.data.msg
});
}
};
return (
<AuthContext.Provider
value={{
isAuthenticated: state.isAuthenticated,
loading: state.loading,
user: state.user,
error: state.error,
login,
logout
}}
>
{props.children}
</AuthContext.Provider>
);
};

导出默认身份验证状态;

身份验证减速器.js 这是减速器钩代码 导入 {

REGISTER_FAIL,
USER_LOADED,
AUTH_ERROR,
LOGIN_SUCCESS,
LOGIN_FAIL,
LOGOUT,
CLEAR_ERRORS,
} from "../types";
export default (state, action) => {
switch (action.type) {

case USER_LOADED:
return {
...state,
isAuthenticated: true,
loading: false,
user: action.payload
};
case LOGIN_SUCCESS:
localStorage.setItem("token", action.payload.token);
return {
...state,
...action.payload,
isAuthenticated: true,
loading: false
};
case AUTH_ERROR:
case LOGIN_FAIL:
localStorage.removeItem("token");
return {
...state,
token: null,
isAuthenticated: false,
loading: false,
user: null,
error: action.payload
};
case REMOVE_LOADING:
return {
...state,
loading: false
};
default:
return state;
}
};

私人路线

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import AuthContext from "../../context/auth/authContext";
const PrivateRoute = ({ component: Component, ...rest }) => {
const authContext = useContext(AuthContext);
const { isAuthenticated } = authContext;
return (
<Route
{...rest}
render={props =>
!isAuthenticated ? (
<Redirect to="/login" />
) : (
<Component {...props} />
)
}
/>
);
};
export default PrivateRoute;

家

import React, { useContext, useEffect } from "react";
import AuthContext from "../../context/auth/authContext";
const Home = () => {
const authContext = useContext(AuthContext);
useEffect(() => {
//authContext.setLoading(true);
authContext.loadUser();
// eslint-disable-next-line
}, []);
return (
<div className="grid-2">
<div>
<ContactForm />
</div>
<div>
<ContactFilter />
<Contacts />
</div>
</div>
);
};
export default Home;  

Answer 1

您可以将登录状态传递给 reducer 并更新您的初始状态。 或使用类似localStorage

let initialState={
loggedIn: localStorage.getItem('isLoggedin' ) || false;
}