0

estoy creando un login con context api, desde el componente consumo ciertas funciones que estan contenidas en el provider, si hago la prueba a nivel de componente no me aparece ningun error, no asi cuando cambio estas funciones y las llamo desde el componente a traves de context consumer, me da el siguiente error:

TypeError: action.fetchData is not a function

mi codigo del componente login es el siguiente:

  import React, { Fragment } from 'react';
  import { Context } from '../../store/TheContext';

export class Login extends React.Component {

render() {
    return(
        <Fragment>
            <Context.Consumer> 
                {action => {
                    return(
                        <form onSubmit={e => action.submitLogin(e)}>
                            <input type="text" onChange={e => action.fetchData(e)} name="username" placeholder="username"></input>
                            <input type="password" onChange={e => action.fetchData(e)} name="password" placeholder="password"></input>
                            <button type="submit">Log in</button>
                        </form>
                    )
                }}
            </Context.Consumer>
        </Fragment>
    )
}
}

en tanto el del provider en donde tengo contenidas las funciones para el login:

import React from 'react';

export const Context = React.createContext();

export class TheProvider extends React.Component {

// initial obj state, this obj has store and actions (methods)
state = {
    // login data:
    loginData: {}

}

aprieta(e) {
    alert('click');
}

/* LOGIN ACTIONS */
fetchData = (e) => {
    const { name, value } = e.target;
    const data = { [name]: value };
    const newData = { ...this.state.loginData, ...data }
    this.setState({
        loginData: newData
    })
}

submitLogin = (e) => {
    e.preventDefault(e);
    let url = 'http://127.0.0.1:8000/api/rest-auth/login/';

    fetch(url, {
        method: 'POST',
        body: JSON.stringify(this.state.loginData),
        headers: {
            'content-type': 'application/json'
        }
    })
    .then(resp => {
        console.log(resp.status);
        return resp.json();
    })
}

render(){
    return(
        <Context.Provider value={this.state}>
            {this.props.children}
        </Context.Provider>
    )
}
}

1 respuesta 1

0

Parece que no estás pasando las funciones al contexto, deberías añadirlas a la hora de pasar el objeto, te muestro un ejemplo:

render(){
    const myContext = {
      ...this.state,
      submitLogin: this.submitLogin,
      fetchData: this.fetchData,
    };

    return(
        <Context.Provider value={myContext}>
            {this.props.children}
        </Context.Provider>
    )
}
3
  • gracias x la respuesta ayer intente ello y no me tomaron lo revisare de nuevo
    – Richi
    Commented el 16 sept. 2019 a las 14:35
  • no hay de que, espero que te haya servido. Commented el 16 sept. 2019 a las 14:36
  • gracias me sirvio :D, pero es raro igual anteriormente hice un context de la misma manera presentada arriba solo que claro metia las funciones en el state y me salia :/
    – Richi
    Commented el 17 sept. 2019 a las 0:41

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.