const data = [ { id: 1, title: "buttermilk pancakes", category: "fullstack", price: 15.99, img: "./img/item-1.jpeg", desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `, }, { id: 2, title: "diner double", category: "backend", price: 13.99, img: "./img/item-2.jpeg", desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `, }, ]; export default data;Aquí recorrí el objeto usando el mapa, pero el resultado devuelto muestra las sumas de precios iteradas. También usé la función de reducción de JavaScript y tampoco funcionó.
const Test = () => { let sum = 0; return ( <div> {data.map((items) => { const values = items.price; sum = values + sum; console.log(Math.max(sum)); const { id } = items; return ( <div key={id}> <p>{sum}</p> </div> ); })} </div> ); };¿Cómo obtengo el valor total del precio usando reaccionar?
Puede usar la función de reduce para lograr esto
data.reduce((sum, p)=> sum+p.price, 0);Puedes usarlo dentro de tu componente.
const Test = ()=> { return <div>{data.reduce((sum, p)=> sum+p.price, 0);}</div> }Simplemente puede lograr el cálculo del precio total usando forEach en lugar de map (ya que map tiene su propio caso de uso, como crear una nueva matriz, y forEach está disponible para nosotros solo para esta iteración simple como en su caso de uso) con una sola línea como :
const data = [{ id: 1, title: 'buttermilk pancakes', category: 'fullstack', price: 15.99, img: './img/item-1.jpeg', desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `, }, { id: 2, title: 'diner double', category: 'backend', price: 13.99, img: './img/item-2.jpeg', desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `, } ]; var sum = 0; data.forEach(subData => sum += subData.price); console.log(sum) // return this `sum` value alone in your div tag below. //return <div>{sum}</div>Consulte este código, puede ayudar a su código
const Test = () => { let sum = 0; data.forEach((item) => { sum = sum + item.price; }); return( <div> {sum} </div> ) }