0
348
VistasReaccionar this.props no está definido
Tengo una configuración bastante estándar, un enrutador con páginas:
import React from "react"; import ReactDOM from "react-dom"; import { IndexRoute, Router, Route, Link, hashHistory as history } from "react-router"; import Layout from "./pages/Layout"; ... import User from "./pages/User"; ReactDOM.render( <Router history={history}> <Route path="/" component={Layout}> <IndexRoute component={...}/> <Route path="project/create" component={...}/> <Route path="project/:id" component={...}/> <Route path="user/:id" component={User}/> <Route path="*" component={...}/> </Route> </Router>, document.getElementById("app-root")); Todo funciona perfectamente excepto cuando voy a una página como site.tld/#/user/5 . El componente User tiene algunos problemas para crear instancias correctamente. Todas las demás páginas funcionan, también tengo otra página que usa parámetros de URL ( project/:id ) y también funciona bien.
import React from "react"; ... export default class User extends React.Component { constructor() { super(); console.log(this); ... } render() { return ... }Esto es lo que me sale en la consola.
Estoy seguro de que es la cosa más tonta del mundo otra vez, pero no puedo elegirlo...
3 Respuestas
Responde la pregunta0
Creo que te falta lo siguiente, intenta reemplazar tu constructor:
constructor(props) { super(props); console.log(this.props) } Pruébelo, debería obtener resultados de this.props .
El constructor de un componente React se llama antes de montarlo. Al implementar el constructor para una subclase React.Component, debe llamar a super(props) antes de cualquier otra declaración. De lo contrario, this.props no estará definido en el constructor, lo que puede generar errores. Fuente: ReactJS.org Component Docs .
0
En mi caso, olvidé vincular el método que estaba llamando, por eso los props no estaban definidos.
constructor(props) { super(props); this.changeScreenToForm = this.changeScreenToForm.bind(this); } changeScreenToForm() { this.props.app.changeScreen(Form); }0
En mi caso esto -
constructor(props) { super(props); console.log(this.props); } todavía dio undefined .
Tuve que usar this.props = props; explícitamente y funcionó.
constructor(props) { super(props); this.props = props; }