Ошибка useContext с реакцией TypeError: невозможно прочитать свойство 'email', равное null
Я пытаюсь получить значения хука, используя контекст и редуктор в React, но когда я регистрирую json, я получаю в три раза больше json с первым значением null, а второе и третье содержат правильный json. Когда я пытаюсь использовать его в ответном письме {user.email}, я получаю сообщение об ошибке "TypeError: Cannot read property 'email' of null". Но почему, если я регистрирую его и вижу объект json, я не могу его вернуть?
Спасибо за помощь и извините за большой код.
function Profile() {
useEffect(() => {
userAuthenticated();
}, []);
// Extraer la información de autenticación
const authContext = useContext(AuthContext);
const { user, userAuthenticated } = authContext;
return (
<div>{user.email}</div>
);
}
export default Profile;
const token = localStorage.getItem('token');
if (token) {
tokenAuth(token);
}
function App() {
return (
<AlertState>
<AuthState>
<ModalState>
<Router>
<Navigation />
<Route path='/' exact component={Header} />
<Route path='/' exact component={CarouselCards} />
<Route path='/newtournament' component={TorneoForm} />
<Route path='/rankingtables' exact component={RankingsTables} />
<Route path='/tournamenttable' exact component={TournamentTable} />
<Route path='/playerlist' exact component={PlayerList} />
<Route path='/' exact component={Draws} />
<Route path='/' exact component={TopEvList} />
<Route path="/player" component={Profile} />
<Footer />
</Router>
</ModalState>
</AuthState>
</AlertState>
);
}
export default App;
import {
SUCCESS_SIGNUP,
SIGNUP_ERROR,
GET_USER,
SUCCESS_LOGIN,
LOGIN_ERROR,
LOG_OUT
} from '../../types';
const AuthState = props => {
const initialState = {
token: localStorage.getItem('token'),
authenticated: null,
user: null,
message: null,
loading: true
}
const [state, dispatch] = useReducer(AuthReducer, initialState);
// Retorna el usuario autenticado
const userAuthenticated = async () => {
const token = localStorage.getItem('token');
if (token) {
tokenAuth(token);
}
try {
const response = await axiosClient.get('/api/auth');
dispatch({
type: GET_USER,
payload: response.data.user
});
} catch (error) {
console.log(error.response);
dispatch({
type: LOGIN_ERROR
})
}
}
return (
<AuthContext.Provider
value={{
token: state.token,
authenticated: state.authenticated,
user: state.user,
message: state.message,
loading: state.loading,
signupUser,
logIn,
userAuthenticated,
logOut
}}
>{props.children}
</AuthContext.Provider>
)
}
export default AuthState;
import {
SUCCESS_SIGNUP,
SIGNUP_ERROR,
GET_USER,
SUCCESS_LOGIN,
LOGIN_ERROR,
LOG_OUT
} from '../../types';
export default (state, action) => {
switch (action.type) {
case GET_USER:
return {
...state,
authenticated: true,
user: action.payload,
loading: false
}
default:
return state;
}
}