0

me remito a pedir ayuda en Stackoverflow ya que no encuentro cómo dar solución a mi problema en React.

Estoy construyendo una App de trivias la cual presenta un número de tarjetas en una grilla de css, a medida que el usuario responde tarjetas estas desaparecen, la partida termina cuando todas las tarjetas han sido respondidas (y por tanto todas hayan "desaparecido" de la grilla).

He simplificado el problema en dos componentes: el componente "Padre" cuenta con una bandera que, en algún momento, cambia su valor y con un arreglo de hijos que renderiza; El componente "Hijo" tiene una bandera cuyo valor "hereda" del valor de la bandera padre. El problema consiste en que dichos componentes hijos, al estar en un arreglo, heredan una única vez el valor del padre, mi intención es que si la bandera del padre cambie, la bandera del hijo también lo hagan, pero esto no ocurre. Creo que el código se explica mejor que mi redacción. Espero puedan ayudarme con su conocimiento.

import React, { Component } from 'react'
import './fathertochildren.scss'

class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {
      flag: false // Inital value, it's overwritten on componentWillMount()
    }
  }

  componentWillMount = () => {
    // Setting my state with "inherited" prop
    this.setState({ flag: this.props.childFlag })
  }

  componentWillReceiveProps(nextProps) {
    // Here I'll receive father's flag change ...
    console.log(`Child's receive props called, nextProps are ${nextProps}`)
    // but console.log() above doesn't appear ... nothing happens
  }

  render = () => {
    return (
      <p className='border border-success'>I have my flag = {this.state.flag ? 'True' : 'False'}</p>
    )
  }
}

// ---------------------------------------------------

class Father extends Component {
  constructor(props) {
    super(props)
    this.state = {
      flag: true, // Flag to be "inherited"
      children: [] // Children to be rendered
    }
  }

  componentWillMount = () => {
    let children = []
    for (let i = 0; i < 12; i++) {
      children.push(<Child key={`child-${i}`} childFlag={this.state.flag} />)
    }
    this.setState({ children })
  }

  toggleFlag = () => {
    // Get copy of current children
    let currentChildren = [...this.state.children]
    // Remove last threee children, now currenChildren has been modified
    let droppedChild = currentChildren.splice(0,3);
    // setState for trigger re-render
    this.setState({ flag: !this.state.flag, children: currentChildren})
  }

  render = () => {
    // class "grid-3by4" is CSS grid, not relevant
    return (
      <div>
        <button onClick={this.toggleFlag} className='mb-3 btn btn-info'>Change Father's flag to {this.state.flag ? 'False' : 'True'}</button>
        <div className='grid-3by4'>
          {this.state.children}
        </div>
      </div>
    )
  }
}

export default Father

Adjunto está una imágen después de cambiar por primera vez la bandera del padre, como pueden ver los últimos tres hijos fueron removidos como se esperaba, pero los restantes aún tienen su bandera en 'True' siendo la bandera del padre 'False'.

demo

2
  • Creo que deberias modificar el estado de tu componente hijo tambien en componentWillReceiveProps. Porque al inicio cada componente hijo tiene su propio estado del flag del padre pero no se modifica cuando se cambia ese flag, porque solo estas seteando ese estado cuando el componente se va a montar pero no cuando recibe nuevos valores de sus props.
    – Isaac
    Commented el 29 jul. 2020 a las 5:00
  • Gracias por comentar :) amm de hecho tu propuesta fue una de las cosas que probé antes de postear mi pregunta, ya que como se puede ver en el código si que implementé el método componentWillReceiveProps en el Hijo, pero este método no se invoca en ningún momento Commented el 29 jul. 2020 a las 12:51

1 respuesta 1

0

Lo que puedo observar es que no hay comunicación entre el Leaf Component (Child) y el Parent Component después del primer re-render:

toggleFlag = () => {
    // Get copy of current children
    let currentChildren = [...this.state.children]
    // Remove last threee children, now currenChildren has been modified
    let droppedChild = currentChildren.splice(0,3);
    // setState for trigger re-render
    //aqui ya no hay comunicacion, aunque si se renderiza el vDOM (this.state.children)
    this.setState({ flag: !this.state.flag, children: currentChildren})
  }

Puede ser porque solo se esta configurando el componente child, dentro del método componentWillMount, que solo se ejecuta en el primer render. Como mencionaron en los comentarios, ya no se están propagando los cambios de las props para los siguientes render.

Sugiero lo siguiente, aunque puedes mejorar el código.

Primero, configura una nueva bandera en el state de React para el Parent Component, esta bandera nos ayudará a saber si estamos en el primer render de React:

 this.state = {
          firstLoad : true,
          flag: true, // Flag to be "inherited"
          children: [] // Children to be rendered
        }

Luego, el método toggleFlag, puede quedar de la siguiente forma, con la nueva bandera firstLoad:

toggleFlag = () => {
    // Get copy of current children
    let currentChildren = [...this.state.children]
    // Remove last threee children, now currenChildren has been modified
    currentChildren.splice(0,3);
    this.setState({ firstLoad: false, flag: !this.state.flag, children: currentChildren});
  }

Enseguida, se puede configurar el método render del Parent Component, de la siguiente forma:

render = () => {
    // class "grid-3by4" is CSS grid, not relevant
    if (this.state.firstLoad) {
      return (
          <div>
            <button onClick={this.toggleFlag}>Change Father's flag to {this.state.flag ? 'False' : 'True'}</button>
            <div>
              {this.state.children}
            </div>
          </div>
        );
    } else {
     return (
        <div>
            <button onClick={this.toggleFlag}>Change Father's flag to {this.state.flag ? 'False' : 'True'}</button>
            <div>
            {this.state.children.map((currentValue, index) => (
              <Child key={index} childFlag={this.state.flag} value={currentValue}/>
            ))}
            </div>
          </div>
      );
    }
  }

Lo que se esta haciendo aquí es decirle a React que estamos expresando explícitamente el arreglo de leaf components (Child), para el primer render y los posteriores re-render.

De esta forma ya existe comunicación entre el Parent component y el Leaf component(Child), después del evento click button.

Finalmente, cambias el estado de React en el leaf component(Child), dentro del método componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
    // Here I'll receive father's flag change ...
    console.log(`Child's receive props called, nextProps are ${nextProps}`)
    // but console.log() above doesn't appear ... nothing happens
    //console.log(nextProps);
    this.setState({flag:nextProps.childFlag})
  }

Logré que funcionara de mi lado, se van alternando las banderas al dar click en el botón y se van eliminando los child components de tres en tres.

Desconozco la finalidad del código, pero creo que se pueden hacer mejoras en la inicialización del componente Leaf(Child).

Espero que esta respuesta sea de ayuda.

Saludos

2
  • Gracias por tu respuesta, funciona y comprendo el error que cometí al pensar que podía mantener en un arreglo los componentes hijos a renderizar, siendo que debo, prácticamente, crear dicho arreglo dentro del método render del padre y no como un arreglo a modo de "atributo" de la clase. Commented el 5 ago. 2020 a las 2:31
  • Seguro, al parecer estos métodos ya estan considerados legacy [reactjs.org/blog/2018/03/27/update-on-async-rendering.html], saludos.
    – g.4
    Commented el 5 ago. 2020 a las 3:15

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.