0

Problemas con precios en React

Perdón por la molestia, estoy dando mis primero pasos con React.js, y uno de los ejercicios era hacer una página de compras, en donde cada compra se agregara al carrito y diera un total de cosas comprada con el total en dinero. Como se puede ver en la imagen en donde tiene que ir el valor total me sale NaN. En donde puede estar el error???. Adjunto código. Como pueden observar en la imagen donde tendría que estar el total aparece NaN, en donde puede estar el error???. adjunto código. Y también quería pedirles, si alguien me puede orientar con el stock???. Espero no estar pidiendo demasiado, muchas gracias desde ya.

Como pueden observar en la imagen donde tendría que estar el total aparece NaN, en donde puede estar el error???. adjunto código. Y también quería pedirles, si alguien me puede orientar con el stock???. Espero no estar pidiendo demasiado, muchas gracias desde ya.

import React from 'react';
import {a, b, Popover, PopoverHeader, PopoverBody, Table, Badge, Button} from 'reactstrap';
import {listaCarrito} from '../listaCarrito.json';

class Carro extends React.Component{
    constructor(){
        super();
        this.state={
            popoverOpen:false,
            listaCarrito
        };

        this.toggle=this.toggle.bind(this);
    };

    toggle(){
        this.setState(prevState => ({
            popoverOpen: !prevState.popoverOpen
        }));

    };


    calculoTotal(){
        let arregloPrecios=[];
        let precioTotal=0;
        listaCarrito.map(
            (listaCarrito,i) => {
                arregloPrecios.push(parseInt(listaCarrito.precio));
                precioTotal=arregloPrecios.reduce((a,b)=>(a+b),0)*1000;
                return(precioTotal);
            }
        );

                return(precioTotal)
    };

    render(){

        const arregloCarrito=this.state.listaCarrito.map(
            (listaCarrito, i) =>{
                return(    
                    <tr key={i}>
                        <td>{(i += 1)}</td>
                        <td>{listaCarrito.titulo}</td>
                        <td>{listaCarrito.precio}</td>
                    </tr>
                )
            }
        )
                return(
            <div>
                <Button id="Popover1" color="info">
                    <span className="material-icons">shopping_cart</span>
                    <Badge color="secondary">{arregloCarrito.length}</Badge>
                </Button>
                <Popover target="Popover1" placement="bottom" isOpen={this.state.popoverOpen} toggle={this.toggle}>
                    <PopoverHeader>Listado de Compras</PopoverHeader>
                        <PopoverBody>
                            <Table>
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Producto</th>
                                        <th>Precio</th>
                                    </tr>
                                </thead>

                            <tbody>
                                {arregloCarrito}
                            </tbody>
                            <tfoot>
                                        <th><b><u>Total:</u></b></th>
                                        <td>{this.calculoTotal()} U$S </td>
                                </tfoot>

                            </Table>
                        </PopoverBody>
                </Popover>
            </div>
        );
    };
};

export default Carro;

introducir el código aquí

3
  • En tu función "calculoTotal" prueba a pasarle el array de productos como parámetro, y a la hora de llamar a la función pasaselo el 20 ene. 2020 a las 15:53
  • Como dice Ricardo, puedes pasarle a tu metodo calculoTotal el arreglo listaCarrito o usarlo de esta manera: this.state.listaCarrito ya que tu listado esta en el state.
    – Isaac
    el 20 ene. 2020 a las 17:13
  • Como lo aplicarían, me pueden dar un ejemplo por favor???. Como les dije, soy muy nuevo en React.js. Desde ya, muchas gracias
    – marsol1
    el 21 ene. 2020 a las 20:07

2 respuestas 2

2

A lo que puedo observar el problema esta en como llamas la función listaCarrito.map. El metodo map retorna un array nuevo con los resultados de la función indicada. En tu caso por cada iteración estas retornando un valor, pero no lo almacenas en ningún lado. Mira lo que se me ocurre que se puede hacer y funciona es lo siguiente... Suponiendo que tengo un arreglo de objetos con los precios y el nombre de cada producto (lo que equivale a la lista que importas):

const listaCarrito = [{
  nombre: 'art1',
  precio: 10,
},{
  nombre: 'art2',
  precio: 20,
},{
  nombre: 'art3',
  precio: 30,
},{
  nombre: 'art4',
  precio: 40,
},{
  nombre: 'art5',
  precio: 50,
},{
  nombre: 'art6',
  precio: 60,
},
];

En este caso el arreglo es solo de 6 artículos (puede ser tan largo como desees). Primero declarare las variables que necesito:

let listaPrecios = []; //Aquí se almacenaran los precios
let total = 0;         //Aquí se guardara el total
let item_precio = 0;   // Aquí almacenare el valor de cada articulo en la iteración

El siguiente paso es crear una función, dentro de la cual sucederá todo el proceso de obtención de precios y la suma de cada uno de estos para retornar un total. A esta función le pasaremos como primer parámetro el arreglo desde donde vas a sacar los precios y como segundo parámetro el arreglo donde los almacenaras.

let setPrecios = (arregloOrigen, arregloPrecios) =>{
  arregloOrigen.map(item => {
    //console.log(item.precio);
    arregloPrecios.push(item.precio);
  })

  for (var i = 0; i < arregloPrecios.length; i++) {
    item_precio = arregloPrecios[i];
    total = total + item_precio;
  }

  return total;
}

Dentro de la función lo primero que sucede es un map. El map recorre cada elemento del arreglo y a toma de cada elemento(item) el precio y le hace un push a un array vació(donde se almacenaran los precios, en este caso listaPrecios). Una vez terminado el mapeo del array te queda como resultado un nuevo array (listaPrecios) solo con los precios de cada articulo en la canasta. Solo falta sumar cada elemento del array, para eso utilizamos un ciclo for. Al final solo retornamos el total, por lo que para saber cuales el precio total solo debes invocar la función,por ejemplo en un console.log:

console.log(setPrecios(listaCarrito, listaPrecios)); //210

En tu caso, como ya estas importando {listaCarrito} no es necesario que la llames con .this. Basicamente lo unico que tendrias que hacer es llamar a la función asi:

setPrecios(listaCarrito, arregloVacio)

Se podría simplificar incluso un poco mas, pero creo que esta es la manera mas clara.

NOTA: No entendí la linea de tu codigo:

precioTotal=arregloPrecios.reduce((a,b)=>(a+b),0)*1000;

Pero puedes agregarla fácilmente después del ciclo for(si es que la aplicas al precio total), o dentro del ciclo for (si es que lo aplicas a cada elemento)

1

Me parece que te estás complicando en el método calculoTotal. No entiendo por qué usas el array auxiliar arregloPrecios; no es necesario. Fíjate también que estás usando los mismos nombres para algunas variables.

En este caso, el problema debería desaparecer usando un reduce para realizar la suma de los precios luego de hacer el map para filtrar los precios de los items del carrito:

calculoTotal() {
  return (
    listaCarrito
      .map(item => item.precio) // obtenemos solo los precios de los items
      .reduce((acc, value) => acc + value) // procedemos con la suma
    )
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.