1

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;
}
1
  • Algo que yo intentaría es colocar los hooks useContext y useState al inicio del componente loginUser, 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 de loginuser debería ir en un hook useEffect.
    – g.4
    Commented el 5 jul. 2021 a las 17:38

1 respuesta 1

1

Yo creo que la mejor manera de ocupar los context es asi:

esto lo crearías en una carpeta llamada context y dentro de ella un archivo llamado user-context.js (la verdad q solo necesitas hacer el archivo con el nombre que te guste pero asi como yo te indico queda mas ordenado)

import React, { useState, useMemo } from 'react';

const UserContext = React.createContext();

export function UserProvider(props){
    const [userContext, setuserContext] = useState(false);

    const cambiarValor = (value) => {
        return setuserContext(value);
    }

    const value = useMemo(() => {
        return({
            userContext,
            cambiarValor
        })
    }, [userContext]);

    return <UserContext.Provider value={value} {...props} />
}

export function useUser() {
    const context = React.useContext(UserContext);
    if (!context) {
        throw new Error('useUser debe de estar dentro del proveedor userContext');
    }
    return context;
}

y en tu _app.js o en tu archivo principal aras lo siguiente:

import { UserProvider } from '../context/user-context';

export default function MyApp({ Component, pageProps }) {
  return(
    <UserProvider>
        <Component {...pageProps} />
    </UserProvider>
  );
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.