1

En la raiz del projecto, tengo el App.js, en el cual, pretendo sacar un contenido u otro según el state del componente.

El contenido en concreto se trata de un video en el caso de que el usuario esté en Home, o un slider en el caso que esté en todas y cada unas de las páginas menos el home.

Tengo el siguiente código en el componente:

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            isHome:true
        };
        this.notHome = this.notHome.bind(this);
        this.isHome = this.isHome.bind(this);
    }
    notHome(){
        this.setState({isHome:false});
    }
    isHome(){
        this.setState({isHome:true});
    }
  render() {
        const inicio = this.state.isHome ? 'video-header' : 'slider-header';
    return (
      <div className="App">

          <header className={inicio}>
                <HeaderCom isHome={this.state.isHome}/>
            <nav className={'nav-header'}>
                <ul className={'desktop-menu'}>
                    <li className={'item-menu-desktop'} onClick={this.isHome}>
                        <NavLink to={'/'}>Inicio</NavLink>
                    </li>
                    <li className={'item-menu-desktop'} onClick={this.notHome}>
                        <NavLink to={'/servicios'}>Servicios</NavLink>
                    </li>
                    <li className={'item-menu-desktop'} onClick={this.notHome}>
                        <NavLink to={'/imprenta'}>Imprenta</NavLink>
                    </li>
                    <li className={'item-menu-desktop'} onClick={this.notHome}>
                        <NavLink to={'/tienda'}>Tienda</NavLink>
                    </li>
                    <li className={'item-menu-desktop'} onClick={this.notHome}>
                        <NavLink to={'/contacto'}>Contacto</NavLink>
                    </li>
                </ul>
            </nav>
          </header>

          <Switch>

              <Route exact path={'/'} component={homeComponent}/>
              <Route path={'/home'} component={homeComponent}/>
              <Route path={'servicios'} component={serviciosComponent}/>
              <Route path={'/imprenta'} component={imprentaComponent}/>
              <Route path={'/contacto'} component={contactoComponent}/>
              <Route component={notFoundComponent}/>

          </Switch>
      </div>
    );
  }
}

El headerComp es el componente que quiero renderizar según el valor de isHome. Con lo cual, el código que tengo es:

function HeaderCom({isHome}) {

    if({isHome}){
        return(
            <div>Es home</div>
        )
    }else{
        return(
            <div>No es home</div>
        )
    }
}

Siempre muestra "Es home", ¿Por qué no detecta el cambio del state?

4
  • Viendo tu código parece que todo luce bien, así que me es difícil saber qué sucede. Pero intenta ver si tus métodos se están llamando, para ello puedes hacerlo con un simple console.log dentro de notHome y así ver si se está llamando. Lo que creo yo que puede pasar es que como dentro del <li> tienes un <NavLink> entonces el evento lo está agarrando el NavLink y no el li, pero incluso puede ser hasta un error de estilos, por eso primero asegúrate que si se esté llamando el método, de llamarse el error es el que te mencioné del evento el 29 mar. 2019 a las 18:42
  • Perdón por la tardanza! sí, he puesto un console.log en la función y entra, lo que no realiza la condición :(
    – Adrián
    el 1 abr. 2019 a las 8:09
  • con las ReactDevelopersTools inspecciono que el cambio en el state se ejecuta. De hecho la función que tengo para que cambie el nombre de la clase, se ejecuta correctamente.
    – Adrián
    el 1 abr. 2019 a las 8:11
  • Quita las llaves en el if: if (isHome) { ... el 1 abr. 2019 a las 8:28

1 respuesta 1

1

Al final he resuelto el problema cambiando la condición de la función HeaderComp.

El resultado final es:

function HeaderCom({isHome}) {

    const header = isHome ?
        <div>
            Es home
        </div> :
        <div>
            No es Home
        </div>;

    return header;
}

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.