0

Tengo un problema que no estoy pudiendo solucionar: Quiero pasar props de un Padre a un Hijo. Esos props vienen desde otro Hijo. El tema es que, al ser setState asíncrono, la primera vez que envío los props están vacíos.

class Pedidos extends Component {

   constructor(){
        this.state = {
             array: []
        }
   }

   pedidoUpdater = (extArray) => {  //recibe un array de Hijo1
        this.setState({
            array: extArray
        })  
   }

   render() {
        return(
            <div className="MainDiv">
              <div className="Hijo1">
                <Hijo1 pedidoUpdater={ this.pedidoUpdater }/>
              </div>
              <div className="Hijo2">
                <Hijo2 comidas={this.state.array}/>
              </div>
            </div>
        )
   }
}

Si pongo un forceUpdate como callback en el setState, Hijo2 termina recibiendo bien los props, pero tengo entendido que es mala práctica o no recomendable hacerlo de esa forma. Quizá estoy encarando mal la situación? O hay algo que no veo?

2
  • 1
    Tienes que añadir al constructor this.pedidoUpdater = this. pedidoUpdater.bind(this); eso te cambiara el estado Commented el 23 oct. 2018 a las 21:54
  • Mm no creo que vaya por ahí el tema. El estado se cambia, solo que los props se envían antes de efectuado dicho cambio.
    – Gundwane
    Commented el 24 oct. 2018 a las 12:49

1 respuesta 1

0

No sé qué es lo que tienes en Hijo1, pero si es un botón el que está llamando la función del padre, entonces tu problema es que en ningún momento le estás pasando la función al evento onClick de Hijo1. Solo estás llamando el evento.

Debería ser así

<button onClick={() => pedidoUpdater(["asado", "lasagna", "ensaladas"])}>
  Click me
</button>

Te dejo un ejemplo

https://codesandbox.io/s/7j126rq95q

1
  • Resultó que en Hijo2, en lugar de mostrar directamente las props, primero seteaba un state con ellas, y luego intentaba mostrar ese state. Supongo que eso complicaba las cosas. Todavía no me manejo bien con React. Como en tu ejemplo, ahora muestro las props directamente y funciona :D Muchas gracias!
    – Gundwane
    Commented el 29 oct. 2018 a las 16:52

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.