Рассчитать внутри карты в es6

Question

Мне нужно вычислить сумму для определенного поля внутри карты

 {agent.reviews.map((a, i) => {
       return (
          <p style={{fontSize: 15}} key={a.id}>Knowledge Rating: 
                 {a.local_knowledge_rating}</p>
       )
  })}

Возвращает

Knowledge Rating: 1

Knowledge Rating: 2

Но мне нужно добиться, чтобы получить сумму вместо

 Knowledge Rating: 3

Есть идеи?

       "users": [
        {
          "name": "someee",
           "reviews": [
           {
              "id": 1,

              "local_knowledge_rating": 1,
            },
            {
               "id": 2,

                "local_knowledge_rating": 2,
             }
         ],
         }
        ]

Answer 1

renderKnowledgeRating() {
  const sum = agent.reviews.reduce(function(a, b) { return a. local_knowledge_rating + b. local_knowledge_rating; }, 0)

  return (
    <p style={{fontSize: 15}}>Knowledge Rating: {sum}</p>
  )
}

{this.renderKnowledgeRating()}

Чтобы улучшить читаемость, извлеките часть другим методом renderKnowledgeRating.и вместо использования map, который не очень помогает в вашей ситуации, обрабатывайте вычисления по-другому и возвращайте один компонент

Answer 2

вы можете попробовать sumBy с помощью lodash: https://lodash.com/docs/4.17.11#sumBy

Answer 3

Вы можете сделать что-то вроде ниже

Объявите метод ниже за пределами рендера и передайте ему массив обзоров как параметр

Приведенный ниже подход будет суммировать рейтинг для каждого пользователя

   sumRating = reviews => {
        let total = 0;
          agent.reviews.forEach(a => {
               total+= a.local_knowledge_rating;
          });
     return total;
  }


        <p style={{fontSize: 15}}>Knowledge Rating:   {this.sumRating()}</p>

Есть много других способов реализовать то же самое.Вышеуказанный подход является одним из них

Answer 4

Как предложено, попробуйте это:

function getSum(total, num) {
 return total + num.local_knowledge_rating;
}

{agent.reviews.map((a, i) => {
   return (
      <p style={{fontSize: 15}} key={a.id}>Knowledge Rating: 
             {a.reduce(getSum)}</p>
   )
})}