如何根据ID计算我的交易？答案

【问题标题】：How to calculate my transactions according to ID?如何根据ID计算我的交易？
【发布时间】：2021-04-22 06:40:50
【问题描述】：

我有一个模拟支出跟踪器的应用程序。

我需要做的是根据我在注册新交易时传递的账户的UUID计算我的交易。

目前，我所有的计算都保存在同一个帐户中。如何正确分组和计算我的交易？

项目文件很多，所以我放在codesandbox.io

在图片中，您可以看到我进行了 4 笔交易，分别使用了 3 个不同的账户，但计算就像有一个账户一样完成

我的 ContextApi：

import React from "react";
import PropTypes from "prop-types";

const AppContext = React.createContext();

const initialState = {
  transactions: [],
};

const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_TRANSACTION":
      return {
        ...state,
        transactions: [action.payload, ...state.transactions],
      };
    default:
      return state;
  }
};

const AppContextProvider = ({ children }) => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
};

AppContextProvider.propTypes = {
  children: PropTypes.node.isRequired,
};

export { AppContext, AppContextProvider };

我的交易清单：

import React from "react";

import { AppContext } from "../../providers/app";

const Transaction = ({ transaction }) => {
  const { state } = React.useContext(AppContext);

  const amounts = state.transactions.map((transaction) => transaction.amount);
  const balance = amounts.reduce((acc, item) => (acc += item), 0);

  const sign = transaction.amount < 0 ? "-" : "";

  return (
    <div className="transaction">
      <div>
        <span>
          <strong>
            {transaction.amount > 0 ? "Transferred" : "Withdrew"} $
            {Math.abs(transaction.amount)}{" "}
          </strong>{" "}
          {transaction.amount > 0 ? "to " : "from "}
          <strong>{transaction.account}</strong>.
        </span>
      </div>
      <div>
        <span>
          Current <strong>{transaction.account}</strong>'s balance is{" "}
          <strong>
            {sign}${Math.abs(balance)}
          </strong>
          .
        </span>
      </div>
    </div>
  );
};

export default Transaction;

【问题讨论】：

标签： javascript reactjs reduce context-api

【解决方案1】：

计算一笔交易的余额：

const balance = state.transactions.reduce( (accu, ta) => {
    return ta.account !== transaction.account
        ? accu
        : accu + ta.amount;
}, 0);

或者，您可以创建一个 balanceByAccount 地图：

const balanceByAccount = state.transactions.reduce( (acc, item) => {
    const newAmount = ( acc[ item.account ] || 0 ) + item.amount;
    return {
        ...acc,
        [item.account]: newAmount
    };
}, {});

然后你可以得到一个帐户的余额，例如：

balanceByAccount[ transaction.account ]

【讨论】：