Tengo una matriz de objetos con números, pero el tipo es una cadena, quiero sumarlos todos.
Lo estoy haciendo de esta manera a partir de las respuestas anteriores sobre el desbordamiento de pila sugerido.
// Here the data has an array of goods which contains // amount objects and i want to calculate to sum of amount objects Total Invoice Price: {data.goods ? data.goods.map((item) => ( <div key={item.id}> <div>{parseInt(item.amount).reduce((a, b) => a + b, 0)}</div> </div > )) : null}
Pero recibo el error TypeError: parseInt(...).reduce is not a function
, ¿cómo solucionarlo?
reduce
es un método de matriz. Entonces: en lugar de mapear los datos, llame a una función dentro de su JSX que devuelva la suma de los valores de amount
de cada objeto en la matriz.
Nota: si sus valores de cantidad son cadenas, cámbielos a números primero ( Number(good.amount)
).
function Example({ data }) { function getTotal(data) { return data.goods.reduce((acc, good) => { return acc + Number(good.amount); }, 0); } return ( <div> <h4>Total</h4> <p>{getTotal(data)}</p> </div> ); } const data = { goods: [{ amount: '1' }, { amount: '5' }, { amount: '13' }] }; ReactDOM.render( <Example data={data} />, document.getElementById('react') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>
goods = [{ amount: "11" }, { amount: "11" }, { amount: "11" }, ] let sum = goods.reduce((a, b) => a + parseInt(b.amount), 0) console.log(sum)