Невозможно рассчитать сумму в компоненте React

Question

Я новичок в React, и моя проблема в том, что у меня есть компонент IncExpSummary, который показывает общую сумму доходов и расходов.Он получает данные о доходах и расходах из избыточного магазина с помощью «mapStateToProps».У меня также есть селекторная функция под названием «total», которая отображает массив объектов и возвращает total (эта функция работает нормально).Проблема заключается в том, что каждый раз, когда я добавляю новый доход или расход, общая сумма не рассчитывается, но сумма нового элемента добавляется в конце предыдущего числа.

IncExpSummary выглядит следующим образом:

import React from 'react';
import { connect } from 'react-redux';
import total from '../selectors/total.js';

class IncExpSummary extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className="income-summary">
          <p className="income-summary-text">Income: {this.props.totalIncome}</p>

        </div>
        <div className="expense-summary">
          <p className="expense-summary-text">Expense: {this.props.totalExpense}</p>

        </div>
      </div>
    )
  }
}

function mapStateToProp(state) {
  return {
    totalIncome: total(state.income),
    totalExpense: total(state.expenses)
  }
}

export default connect(mapStateToProp)(IncExpSummary);

Функция «итого» выглядит следующим образом:

export default (data) => {
  if (data.length > 0) {
    return data.map((item) => {
      return item.amount;
    }).reduce((total, amount) => {
      return total + amount;
    });
  } else {
    return 0;
  }
}

После добавления двух доходов с суммами 30 и 20 каждый я ожидал, что результат будет 50, но фактический результат равен 3020.

Полный проект доступен здесь: https://codesandbox.io/s/l4k6q6ok5q

Answer 1

Это потому, что значения item.amount являются строками. Это приводит к конкатенации строк.

Измените его следующим образом, чтобы строки были проанализированы как числа с плавающей запятой, и они будут работать правильно:

export default (data) => {
  if (data.length > 0) {
    return data.map((item) => {
      return parseFloat(item.amount);
    }).reduce((total, amount) => {
      return total + amount;
    });
  } else {
    return 0;
  }
}

Answer 2

просто измените строку в функции 'total', не возвращая сумму строки:

return item.amount;

ниже для целого числа возврата:

return +item.amount;

Answer 3

Вам нужно разобрать номер:

export default (data) => {
  if (data.length > 0) {
    return data.map(({ amount }) => parseFloat(amount)).reduce((total, amount) => total + amount);
  } else {
    return 0;
  }
}