Problema: Tengo una función la cual mantiene siempre bien el context
, el problema esta que al pasar de esa función de react
a una componente de react
se pierde y la página siguiente no es capaz de recuperar el context
, aún así por alguna razón se me guarda el context
en el login.js
pero al ir a la otra componente y realizar un static contexto = userContext
, lo termino perdiendo, además que dentro de la componente no se permite usar React.useContext()
.
User.js
import React from "react";
export const userContext = React.createContext('false');
export const setUserContext = React.createContext('false');
Login.js
async function loginUser(credenciales, setUserInfo) {
const url = "http://localhost:8000/api/Usuarios/?search=" + credenciales.usuario;
const response = await axios.get(url);
const data = await response.data;
if(data.length > 0){
if(data[0].password === credenciales.password){
setUserInfo(data[0].nombre);
}
else{
alert('Comprueba los datos introducidos');
}
}
else{
alert('Comprueba los datos introducidos');
}
}
const userInfo = React.useContext(userContext);
const setUserInfo = React.useContext(setUserContext);
const [usuario, setUsuario] = React.useState({});
const [password, setPassword] = React.useState({});
console.log(userInfo);
const handleLogin = async (e) => {
e.preventDefault();
await loginUser({
usuario,
password,
}, setUserInfo);
};
CompraVenta.js
Al realizar aquí en unas de las funciones console.log(context)
, se mantiene de manera vacía.
import React from "react";
import axios from "axios";
import {userContext} from "./user";
export default class Compraventa extends React.Component {
static context = userContext;
}
useContext
yuseState
al inicio del componenteloginUser
, son reglas básicas de los hooks, ¿tal vez el problema que describes sea por ese detalle? Además la lógica para obtener al usuario al inicio deloginuser
debería ir en un hookuseEffect
.