1

Tengo un componente llamado LoadingComponent, éste está incluido en el App.js para su renderizado. Hasta ahí todo bien.

En el LoadingComponent le paso una prop al state, según esté true o false quiero que cambie una clase del div "loading".

En el App.js quiero que cuando cargue la pantalla, este loading cambie de estado, he creado una función para ello y no consigo de que cambie el valor del booleano

Os dejo el código de ambos componentes:

Loading:

function Cargando(loading) {
     if (loading){
         return (<div className='loading is--active'>
                 <div className="loader-s">
                     <img src={logo} width="90" height="34" alt={'Logo s'}/>
                     <div className="loader--bar"></div>
                 </div>
             </div>
         )
     }
     return (<div className='loading'>
         <div className="loader-ss">
             <img src={logo} width="90" height="34" alt={'Logo s'}/>
             <div className="loader--bar"></div>
         </div>
     </div>)
 }

 export class LoadingComponent extends Component{
     constructor(props){
         super(props)
         this.state = { loading:this.props.isActive }
     }
     render() {
         return (
                <div>
                     {Cargando(this.state.loading)}
                </div>
         );
     }
 }

Y el App.js:

class App extends Component {
    constructor(props){
        super(props)
        this.state = {loading:true}
    }
    componentDidMount() {
        this.setState({loading:false})
        console.log(this.state.loading)
    }

    render() {
    return (
      <div className="App">
            <LoadingComponent isActive={this.state.loading}/>
            <MenuComponent/>
       <Switch>
         <Route exact path='/' component={Home}/>
         <Route path='/projects' component={Portfolio} />
         <Route path='/cv' component={Cv} />
         <Route path='/contact' component={Contact} />
         <Route component={NotFound} />
       </Switch>
      </div>
    );
  }
}

export default App;

El console.log del app.js en el ComponentDidMount me da true, pero le acabo de setear el valor false!

No se que puede estar pasando

1 respuesta 1

2

Creo que tienes un poco confundidos los conceptos.

componentDidMount() se ejecuta solo una vez y después del primer render() del elemento, mientras que setState() lo que hace es ejecutar otro render() entre otras funciones con excepción de componentDidMount()

Fíjate en esta gráfica:

React Lifecycle Tomado de: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Por lo que tiene sentido que cuando tu haces un console.log() el valor del state sea true

Por lo general recomiendan que se utilicen stateless components que hereden props de un componente padre, lo que tu ya estás haciendo. Esto haría innecesario el uso del state en el hijo ahorrándonos el manejo del state dentro de este

Menos charla y más código, aquí te dejo un ejemplo adaptado de tu código con un pequeño setTimeout() para que se pueda apreciar el cambio del estado

function cargando(loading) {
  if (loading){
    return <div>Loading...</div>;
  }
  return <div className='loading'>Done loading</div>;
}

// Stateless component
function LoadingComponent(props) {
  return <div>{cargando(props.isActive)} </div>;
}

// Class component
class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {loading:true}
  }
  
  componentDidMount() {
    setTimeout(() => this.setState({ loading:false }), 1500);
  }

  render() {
    return (
      <div className="App">
        <LoadingComponent isActive={this.state.loading}/>
      </div>
    );
  }
}

ReactDOM.render(<App /> , document.getElementById("react"));
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1
  • 1
    Muchisimas gracias! Estaba totalmente confundido!
    – Adrián
    el 14 mar. 2019 a las 20:06

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.