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

Question

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

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

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

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

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

我的 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;

Answer 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 ]

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

How to calculate my transactions according to ID?

javascript

reduce

reactjs

react-context