1

Resulta que tengo el componente App.js que tiene el state isHome:true según se va navegando en la web se va cambiando el state. Este state tiene la función de mostrar un contenido u otro según si es true o false.

Después, tengo componentes como páginas, homeController para el home, contactoController para contacto... cuando el usuario sigue los links del DOM no tengo problema porque cada link tiene una función que setea el state a true o a false según convenga. El problema llega cuando por ejemplo, se carga el home, el usuario clica en contacto (se cambia el state), y a continuación en vez de clicar en home, le dan para atrás en el navegador. Con esta acción, el contenido del home no es el que debe.

¿Como puedo setear en HomeController el state del componente padre?

Contenido del App.js:

import React, { Component } from 'react';
import {Switch, Route, NavLink} from 'react-router-dom';
import { ReactComponent as Logo } from "./logo360.svg";
import { ReactComponent as Arg } from "./arg.svg";
import Fade from "react-reveal/Fade";
import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';

import homeComponent from './components/homeComponent';
import serviciosComponent from "./components/serviciosComponent";
import imprentaComponent from "./components/imprentaComponent";
import contactoComponent from "./components/contactoComponent";
import notFoundComponent from "./components/notFoundComponent";
import avisoLegalComponent from "./components/avisoLegalComponent";
import condicionesComponent from "./components/condicionesComponent";

const content = [
    {
        title: 'Dpto. Diseño',
        image: 'assets/img/slider/diseno.jpg',
        user: 'Juan Manuel',
        user2: 'Antonio Dorado',
        user3: 'Israel Zarallo',
        left: false
    },
    {
        title: 'Dpto. Digital',
        image: 'assets/img/slider/digital.jpg',
        user: 'Rosario Azuar',
        left:true
    },
    {
        title: 'Administración',
        image: 'assets/img/slider/admon.jpg',
        user: 'David López',
        user2: 'Ana Isabel Vázquez',
        user3: 'Rocío Díez',
        left:true
    },
    {
        title: 'Imprenta',
        image: 'assets/img/slider/imprenta.jpg',
        user: 'Joaquín Heredia',
        user2: 'Eugenio Andana',
        left:false
    },
    {
        title: 'Dpto. Informática',
        image: 'assets/img/slider/informatica.jpg',
        user: 'Adrián Porcel',
        left:true
    },
    {
        title: 'Logística',
        image: 'assets/img/slider/almacen.jpg',
        user: 'Carlos Contreras',
        user2: 'Mercedes Ruiz',
        left:false
    }
];
function ClaseSlider(left) {
    const clase = left ?
        'slider-bottom' :
        'slider-top';

    return clase;
}

function HeaderCom({isHome}) {

    const header = isHome ?
        <div className={'video-intro'}>
            <video width="100%" height="auto" style={{width: '100%'}} src="http://arguelles360.com/img/intro.webm"
                   loop="loop" autoPlay="autoplay" muted={'muted'}>
                Tu navegador no implementa el elemento <code>video</code>.
            </video>
        </div> :
        <div>
            <Slider>
                {content.map((article, index) => <div key={index}>

                        <div className={ClaseSlider(article.left)}>
                            <img src={article.image} alt={article.title}/>
                        </div>

                </div>)}
            </Slider>
        </div>;

    return header;
}

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            isHome: true,
            menuMobile: false,
            header: true
        };
        this.notHome = this.notHome.bind(this);
        this.isHome = this.isHome.bind(this);
        this.openMenuMobile = this.openMenuMobile.bind(this);
        this.closeMenuMobile = this.closeMenuMobile.bind(this);
    }
    openMenuMobile(){
        this.setState({menuMobile:true});
    }
    closeMenuMobile(){
        this.setState({menuMobile:false})
    }
    notHome(){
        this.setState({isHome:false});
    }
    isHome(){
        this.setState({isHome:true});
    }
    componentDidMount() {
        var h1 = parseInt(this.refs.header.offsetHeight);
        window.addEventListener('scroll', this._calcScroll.bind(this, h1));
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this._calcScroll)
    }

    _calcScroll(h1) {
        var _window = window;
        var heightDiff = parseInt(h1);
        var scrollPos = _window.scrollY;
        if (scrollPos > heightDiff) {
            this.setState({
                header:false
            });
        } else {
            this.setState({
                header:true
            });
        }
    }
  render() {
        const inicio = this.state.isHome ? 'video-header' : 'slider-header';
        const claseBox = this.state.menuMobile ? 'mobile-menu-box opened' : 'mobile-menu-box';
        const claseNav = this.state.menuMobile ? 'nav-header darker' : 'nav-header';
        const claseList = this.state.menuMobile ? 'mobile-menu list-opened' : 'mobile-menu';
        const claseHeader = this.state.header ? '' : ' white-menu-mobile';
    return (
      <div className="App">

          <header className={inicio}  ref={'header'}>

                <HeaderCom isHome={this.state.isHome} />

              <Arg className={"logo-desktop"}/>

              <nav className={claseNav  + claseHeader}>

                <Fade cascade top delay={500}>
                    {/*
                    Menú Desktop
                    */}
                <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>

                </Fade>
                  {/*
                    Menú movil
                    */}
                  <div className={claseBox}>
                      <Arg className={'logo-movil'}/>
                      <div className={'box-buttons'}>
                          <div className="hamburger" onClick={this.openMenuMobile}>
                              <div></div>
                              <div></div>
                              <div></div>
                          </div>
                          <div className="ex" onClick={this.closeMenuMobile}>
                              <div></div>
                              <div></div>
                          </div>
                      </div>
                      <ul className={claseList}>
                          <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>
                  </div>


              </nav>
              <div className="logo-head">
                  <Fade delay={1000}>
                      <Logo/>
                  </Fade>
              </div>
          </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 path={'/aviso-legal'} component={avisoLegalComponent}/>
              <Route path={'/condiciones-y-uso'} component={condicionesComponent}/>
              <Route component={notFoundComponent}/>

          </Switch>
          <footer className={'footer-arg'}>
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-xs-12"> Argüelles360.com - Todos los derechos reservados <br/> <NavLink to={'/aviso-legal'}> <span onClick={this.notHome}>Aviso legal</span></NavLink> - <NavLink to={'/condiciones-y-uso'}><span onClick={this.notHome}>Condiciones de uso</span></NavLink></div>
                    </div>
                </div>
          </footer>
      </div>
    );
  }
}

export default App;
3
  • Entiendo lo que sucede y seguramente es debido a los hooks, cómo no tengo acceso a tu código no puedo decirte con exactitud que sucede, pero lo mas probable es que con setear el isHome: true dentro del método componentDidMount es suficiente. Sin embargo, no entiendo por qué debes complicarte tanto con una variable así, cuando existen librerías como react-router-dom y react-redux que de formas distintas pueden ayudarte a resolver eso de una manera más práctica Commented el 2 abr. 2019 a las 14:06
  • setear el isHome:true del HomeController ??? el state se encuentra en el App.js. En cuanto a la complicación, uso react-router-dom para el routeo. El problema es que, tengo un header (dos en realidad, uno se muestra si está en el home, y otro se muestra en el resto de páginas, éste último es un slider, y no quiero que se resetee cada vez que navego) y la condición de este header se encuentra en App.js
    – Adrián
    Commented el 2 abr. 2019 a las 14:13
  • Incluyo el código de app.js en la pregunta...
    – Adrián
    Commented el 2 abr. 2019 a las 14:13

1 respuesta 1

2

Como veo que en tu código no hay definición de un Router, entonces supondré que lo tienes en un componente a parte del código que me mostraste, porque de otra forma no funcionaría adecuadamente tu código. Entonces basado en eso, hay una función que te provee react-router-dom y es withRouter el cual le provee a tu componente acceso al contexto del router, para implementarlo basta con hacer esto:

import { withRouter } from 'react-router-dom';

// hasta donde exportas tu componente, lo reemplazas por esto
export default withRouter(App);

De esa forma tu componente ya recibe props del contexto de la navegación, entonces debemos setearlos en los hooks correspondientes:

componentDidMount() {
  // en tu hook de didMount es necesario verificar si la primera página apenas se monta el componente es home
  this.setState({ isHome: this.props.location.pathname === '/home' });
}

componentDidUpdate(prevProps) {
  // cuando recibas nuevas props, esto será cada que cambie la url
  if (prevProps.location.pathname !== this.props.location.pathname) {
    this.setState({ isHome: this.props.location.pathname === '/home' });
  }
}

De esta forma, cada que cambie la url, inclusive cuando le des a atrás desde el navegador, llamará a esa función y validará si está en home o no para setear tu variable de isHome

Cualquier duda pregunta, comenta, con gusto te ayudaré a responder.

EDICIÓN

Para hacerlo con ambas rutas, es decir: / y /home, puedes usar un método a parte, al menos así lo resolvería yo (entre gustos colores):

verifyIfIsHome() {
   return ['/home', '/'].indexOf(this.props.location.pathname) !== -1;
}

Y solo las usas en los dos métodos que definimos antes (esto solo fue para que la lógica quede unificada):

componentDidMount() {
  // en tu hook de didMount es necesario verificar si la primera página apenas se monta el componente es home
  this.setState({ isHome: this.verifyIfIsHome() });
}

componentDidUpdate(prevProps) {
  // cuando recibas nuevas props, esto será cada que cambie la url
  if (prevProps.location.pathname !== this.props.location.pathname) {
    this.setState({ isHome: this.verifyIfIsHome() });
  }
}
5
  • Genial! perfecto! tengo un problemilla, y el home es el path: / y /home... qué puedo hacer para resolver esto?
    – Adrián
    Commented el 2 abr. 2019 a las 14:47
  • Pueden ser los dos a la vez? y en ambos la lógica es la misma? es decir, si te estas en / o en /home debería isHome ser igual a true? Commented el 2 abr. 2019 a las 14:48
  • Sip, exacto. Tengo los dos path apuntando al mismo componente
    – Adrián
    Commented el 2 abr. 2019 a las 14:51
  • Ya edité, la respuesta, si te sirvió, no olvides marcarla como respuesta para cerrar la pregunta Commented el 2 abr. 2019 a las 14:53
  • Justo lo que necesitaba! muchísimas gracias
    – Adrián
    Commented el 2 abr. 2019 a las 14:55

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.