1

estoy dando mis primeros pasos con React y me encontre con un problema el cual no puedo resolver.

Tengo un componente Padre el cual tiene en el this.state un array. Este array por el momento lo renderizo en un h2

Luego tengo componentes hijos, el cual al apretarlos, pushea data nueva al array. Verifico con un console.log(array) y definitivamente se esta agregando data al arreglo pero no se visualiza en el DOM (no se esta renderizando nuevamente el componente padre)

Pedidos.js

class Pedidos extends Component {
  constructor(props){
    super(props);
    this.state={
      items:["cafe"],
      pedido:"",
  }}

agregarCarrito=(item)=>{
    
    this.state.items.push(item)
    console.log(this.state.items);

   }
render() {
    return(
      
        
      <div className="pedidoscont">
        <h2>items: {this.state.items}</h2>
      <Card item="Cafe cortado" price="$200" imagen={Cafe} agregarCarrito={this.agregarCarrito}/>
      <Card item="Cafe con leche" price="$180" imagen={Cafe} agregarCarrito={this.agregarCarrito}/>

      </div>

    );
  }}
  export default Pedidos;



Card.js

class Card extends Component{
  constructor(props){
      super(props);
      this.state={
          user:"null"
      }
      
  }

  agregar=()=>{
    this.props.agregarCarrito(this.props.item);
    console.log("add");
  }
  render() {
    return(
      <div className="card" onClick={this.agregar}>
          <img src={this.props.imagen}></img>
          <h2 className="item">{this.props.item}</h2>
          <h3 className="price">{this.props.price}</h3>
      </div>
    );
  }}
  export default Card;

2 respuestas 2

2

Debes utilizar la función setState para actualizar correctamente el estado.

agregarCarrito = (item) => {
    this.setState({
        items: [...this.state.items, item]
    });
}
1
  • Muchas gracias, funciono perfectamente ! Commented el 3 mar. 2022 a las 15:24
1

Debes utilizar la función setState (ver documentación), no cambiar el estado directamente:

// Tu código:
this.state.items.push(item)

// Correcto:
const newItems = this.state.items;
newItems.push(item);
this.setState({ items: newItems });

// O bien
this.setState((prevState) => {
    prevState.items.push(item);
    return { items: prevState.items };
});
1
  • Muchas gracias! :D Commented el 3 mar. 2022 a las 15:28

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.