1
import React from 'react';

const App = () => {

  const fruits = [
        { name: "banana", cor: "yellow", price: 2 },
        { name: "cherry", cor: "red", price: 3 },
        { name: "strawberry", cor: "red", price: 4 },
      ]
  

  return (
    <div className="App" >
      <div id="all fruit names"></div>
      <div id="red fruit names"></div>
      <div id="total"></div>
    </div>
  );
}

Eu preciso somar o valor dos preços das frutas, mas não estou conseguindo pegar o valor do objeto. Quando uso map ele retorna os números mas na forma de string.

3 Respostas 3

2

Inicialmente te recomendo uma leitura sobre Como não fazer perguntas no Stack Overflow, irei responder a mesma de acordo com o que entendi pelo titulo da pergunta usando o método reduce para somar os valores no array desejado.

const fruits = [
  { name: "banana", cor: "yellow", price: 2 },
  { name: "cherry", cor: "red", price: 3 },
  { name: "strawberry", cor: "red", price: 4 },
];

// acumulador é a variável que mantem o valor da soma dos seus items, que neste caso começa de 0 e a cada iteração é somado o valor o objeto atual
const result = fruits.reduce(function (acumulador, objetoAtual){
  return acumulador + objetoAtual.price;
}, 0);

// Este irá produzir o mesmo resultado porem usando uma Arrow Function
const result2 = fruits.reduce((a, b) => a + b.price, 0);

console.log(result);
console.log(result2);

1

Sei que a pergunta é sobre como usar reduce (e outra resposta já explicou como fazê-lo), mas na verdade você não precisa dele. Um loop simples já resolve:

let total = 0;
for (const fruit of fruits) {
    total += fruit.price;
}
// usar o total do jeito que quiser

Ou o for mais tradicional:

let total = 0;
for (let i = 0; i < fruits.length; i++) {
    total += fruits[i].price;
}

Só isso.


"Ah, mas eu quero usar reduce."

Pra que? Será que precisa mesmo? A menos que estejam te "obrigando", eu não vejo nenhuma razão técnica ou prática para usá-lo em vez de um loop simples (a não ser talvez por gosto pessoal, ou "boas práticas", ou "paradigma funcional é mais legal", etc). Talvez te digam que é "melhor porque tem menos linhas":

let total = fruits.reduce((a, b) => a + b.price, 0);

Mas "código menor" não é necessariamente "melhor". Até porque reduce geralmente será mais lento que um for simples (claro que para poucos arrays pequenos, a diferença será insignificante e imperceptível, mas aumente o tamanho deles e a diferença se torna evidente).


Apenas para deixar claro que não sou contra o uso de reduce em si. Só acho que é "super valorizado", e nem sempre é necessário (para somar elementos de um array, definitivamente eu acho um exagero).

0

Use map sobre um array para criar uma lista de componentes para cada item.

Use filter para filtrar um array, de acordo com determinado critério. Por exemplo, para listar apenas as frutas vermelhas.

Use reduce para transformar um array em um valor, que pode ser um número, um objeto, etc. No caso, para transformar uma lista num total de preços.

Opcionalmente, use React.useMemo para memorizar um cálculo, em caso de re-renderização, refazendo-o apenas caso a lista de dependências mude.

Demo no codesandbox

const Component = ({ fruits }) => {
  const redFruits = useMemo(() => fruits.filter(item => item.cor === "red"), [
    fruits
  ]);

  const total = useMemo(() => fruits.reduce((a, b) => a + b.price, 0), [
    fruits
  ]);

  return (
    <div className="App" style={{ border: "2px solid black" }}>
      <div id="all-fruit-names">
        {fruits.map(item => (
          <p>
            {item.name} ({item.price})
          </p>
        ))}
      </div>

      <div id="red-fruit-names" style={{ color: "red" }}>
        {redFruits.map(item => (
          <p>{item.name}</p>
        ))}
      </div>

      <div id="total">Total: {total}</div>
    </div>
  );
};

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .