2

Estoy desarrollando una aplicación sencilla donde no quiero utilizar react con redux.

Manejo la autenticacion con firebase, tengo un componente Header que se ve en todas las rutas donde administro el login y luego paso es usuario al componete Route.

Es aquí donde quiero gestionar el usuario y poder enviárselo a otros componentes pero no logro pasar el User desde Routes al Componente Super_Admin

ya intente <Route path="/administar_cuentas" render={(props) => <SuperAdmin {...props} actualUser={this.actualUser}/>}

pero al intentar leerlo (this.props.actualUser) me responde

SuperAdmin.js:20 Uncaught TypeError: Cannot read property 'actualUser' of undefined

¿como podria pasar props a un componente rendeizado por React Router dentro de un Switch?

adjunto codigo

Router.js

export default class Router extends Component {
  state= {
    user: null 
   }

   actualUser= this.state.user;

  sessionUser = (user) =>{

   if(user !=null ){
    this.setState({
      user: user
    });
    console.log(user.displayName);
   }
  }
    render() {
        return (
          <BrowserRouter>

            <Header sessionUser={this.sessionUser} />

            <Container fluid={false}  >
              <Switch>
                <Route exact path="/" component={Home}/>  

                <Route  path="/administar_cuentas" render={(props) => <SuperAdmin {...props} actualUser={this.actualUser}/>}
                />      
              </Switch>
            </Container>
          </BrowserRouter>  
        );
    }
}

SuperAdmin.js

export default class SuperAdmin extends Component {
    state= {
        user: "",
    }


    componentWillMount(){
      // validar si existe session abierta

    }


    imprimir(){
      console.log(this.props.actualUser);
    }

    render() {
        return (
            <Row className="mt-3  ">

              <ListaCategorias user={this.state.user}  />

              <Col sm={7} className="recuadro ml-4">
                  <h1 className="text-center"> Datos empresas</h1>
                  <Button onClick={this.imprimir} >Imprimir</Button>
             </Col>
              <AuthUserContext.Consumer>
              {authUser =>
                authUser ? <h1>Loguaeado</h1> : <h1>Iniciar Sesion</h1>
              }
            </AuthUserContext.Consumer>
            </Row>
        );
    }
}
3
  • 1
    El error te dice que no puede leer la propiedad actualUser de undefined, o sea que this.props es undefined, esto se debe a que this hace parte de otro scope por lo que puedes cambiarla a una arrow function o cambiar tu botón por uno así: <Button onClick={this.imprimir.bind(this)}>Imprimir</Button> y de esta forma funcionaría el 16 may. 2019 a las 16:55
  • @GermanAlzate No es recomendable hacer un bind dentro de los renders por cuestión de performance. Es mejor usar métodos arrow.
    – gugadev
    el 16 may. 2019 a las 17:00
  • Tienes razón @gugadev, también puede hacerlo en el constructor, lo cual es mucho más optimo incluso que un arrow function ya que al momento de transpilar no crea referencias adicionales el 16 may. 2019 a las 17:02

1 respuesta 1

2

Dentro de lo render, this hace referencia a la instancia misma, pero es distinto en funciones:

Los métodos de clase en JavaScript no son bindeados por defecto.

Lo que necesitas realizar es hacer un binding explícito:

constructor(props) {
  super(props)
  this.imprimir = this.imprimir.bind(this)
}

O usar arrow functions:

imprimir = () => { ... }
2
  • Gracias..., esto soluciono todo , aun no entiendo bien el manejo de los scope y el concepto del .bind(this) pero empezare a empaparme del tema, pues como dice @gugadev al momento de transpilar no crea referencias adicionales mejorando el rendimiento de la aplicaion
    – Jeff Ruby
    el 16 may. 2019 a las 19:30
  • Dependiendo si transpilas a ES5. Si generas bundles para ES6 no habría impacto en performance.
    – gugadev
    el 17 may. 2019 a las 0:14

Tu Respuesta

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

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