1

Quiero actualizar en mi state array el valor de cantidad a +1 que contenga un key especifico

    this.state = {
     producto:[
        0:{precio: 62, producto: "Cafe", key: "5cef2", cantidad: 1},
        1:{precio: 20, producto: "Soda", key: "2fbv", cantidad: 1}
        2:{precio: 50, producto: "Pastel", key: "1tej2", cantidad: 1}
     ]}

He encontrado este ejemplo pero no me funciona alguien que me pueda ayudar que hice mal ..


masUnElemento(data){
        this.setState(state => {
            const agrega = this.state.producto.filter((item) => {
             if(item.key == data.key){
                item.cantidad == data.cantidad 
            })

            return {agrega}
        });
}
2
  • Primero tendrías que mostrar esos ejemplos que no te han funcionado para ver que ocurre, por el resto solo tienes que recorrer el producto y encontrar la key
    – lDanny7
    Commented el 13 jun. 2019 a las 6:58
  • agregue el ejemplo @Idanny7 sabes como puedo actualizar esos valores Commented el 13 jun. 2019 a las 14:16

2 respuestas 2

2

Puedes lograr lo que deseas revisando que llave coincide con el producto al que quieres aumentar, aumentas su cantidad y luego actualizas el estado con un nuevo arreglo de productos de esta manera:

update(key) {
  const { productos: oldProductos } = this.state;
  // Iteramos sobre el arreglo y regresamos uno nuevo para actualizar el estado
  const productos = oldProductos.map(p => {
    // Revisamos que la llave recibida coincida con el elemento que queremos actualizar
    if (p.key === key) {
      // Actualizamos la cantidad
      p.cantidad += 1;
      // Regresamos el nuevo elemento con la cantidad actualizada
      return p;
    }
    // Si no es el elemento que deseamos actualizar lo regresamos tal como está
    return p;
  });

  this.setState(productos);
}

Aquí dejo un ejemplo funcional:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productos: [
        {
          precio: 62,
          producto: "Cafe",
          key: "5cef2",
          cantidad: 1
        },
        {
          precio: 20,
          producto: "Soda",
          key: "2fbv",
          cantidad: 1
        },
        {
          precio: 50,
          producto: "Pastel",
          key: "1tej2",
          cantidad: 1
        }
      ]
    }
  }

  update(key) {
    const { productos: oldProductos } = this.state;
    const productos = oldProductos.map(p => {
      if (p.key === key) {
        p.cantidad += 1;
        return p;
      }
      return p;
    });

    this.setState(productos);
  }

  render() {
    const { productos } = this.state;
    return (
      <table>
        <thead>
          <th>Precio</th>
          <th>Producto</th>
          <th>Llave</th>
          <th>Cantidad</th>
          <th>&nbsp;</th>
        </thead>
        <tbody>
          {productos.map(p => (
            <tr key={p.key}>
              <td>{p.precio}</td>
              <td>{p.producto}</td>
              <td>{p.key}</td>
              <td>{p.cantidad}</td>
              <td>
                <button 
                  type="button" 
                  onClick={() => this.update(p.key)}
                >
                  +
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<div id="root"></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>

0

Yo normalmente extraigo el objeto del estado primero, lo trabajo y al final actualizo el estado:

masUnElemento(data) {
  let indexProducto = this.state.producto.findIndex(x => x.key === data.key);
  let producto = this.state.producto;
  producto[indexProducto].cantidad += data.cantidad;

  this.setState({ producto });
}
1
  • Gracias por el dato, me funciono,@kroneaux Schneider Commented el 13 jun. 2019 a las 20:59

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.