0
172
VistasUsó un estado dentro de otro estado pero actualizarlo no actualiza el estado externo, ReactJS
Tengo un JSX element que quiero controlar su CSS class con un estado, y el elemento en sí también está anidado en otro estado como se muestra a continuación:
this.setState({ content: <div className={this.state.cClass} /> })El problema es que, cuando actualizo el estado de cClass, quiero que el estado del contenido también se actualice, pero permanece igual. Como puedó resolver esté problema ?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
He modificado tu código. una vez que devuelve el estado del contenido, se carga en el DOM, pero después de que se actualiza el estado de setTimeout setTimeout, pero aún así no se reflejará en el DOM, ya que la propiedad de clase sigue siendo "Aplicación" en el DOM HTML. que no tiene más referencia a this.state.cClass
import "./styles.css"; import React from "react"; export default class App extends React.Component { constructor(props) { super(props); this.state = { cClass: "App" }; } componentDidMount() { setTimeout(() => { this.setState( { cClass: "App fade" }, () => { console.log(this.state.cClass); } ); }, 2000); } render() { return ( <div className={this.state.cClass}> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); } } 
·
Juan Pablo Isaza
Denunciar
0
intente usar la devolución de llamada
this.setState((prevState)=>({ content: <div className={prevState.cClass} /> })// ciclo de vida editado
componentDidUpdate(prevProps, prevState){ if(prevState.cClass !== state.cClass){ this.setState({ content: <div className={prevState.cClass} /> }) } }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta