React.js：无法访问状态对象中的对象属性

Question

I am working on a finance tracker. Eventually, the finance tracker will be able to access an account in the user's bank account, pull every transaction, and the user will be able to add transactions as future projections. The idea is to give the user the ability to run financial projections/scenarios using the most recent checking/saving account information in the user's bank account(s).

I am working on a "running total" column which takes the amount found in transactionData.amount and will add transactionData.amount to startBal if this is the "zero" index. Otherwise, it will use the numbers found in the previous index for transactionData.runningTotal and add to the value found in the current index for transactionData.amount.

In either case, the new calculation should be added to the current index for transactionData.runningTotal. I am essentially mimicking what an online transaction detail would, in the event that the bank does not provide this data already.

Here is the parent component.

import React, { Component } from "react";

import TransactionSearch from "./transactionSearch.js";
import PendingTransactions from "./pendingTransactions.js";
import Transactions from "./transactions.js";

class CheckingAccount extends Component {
  state = {
    startBal: 1000,
    pendingTransData: [
      { id: 0, date: "1/1/2020", transaction: "gas", amount: -25.45 },
      { id: 1, date: "1/2/2020", transaction: "cell phone", amount: -127.35 },
      { id: 2, date: "1/3/2020", transaction: "car payment", amount: -303.97 }
    ],
    transactionData: [
      {
        id: 0,
        date: "1/1/2020",
        transaction: "gas",
        amount: -35.45,
        runningTotal: null
      },
      {
        id: 1,
        date: "1/2/2020",
        transaction: "cell phone",
        amount: -227.35,
        runningTotal: null
      },
      {
        id: 2,
        date: "1/3/2020",
        transaction: "car payment",
        amount: -403.97,
        runningTotal: null
      }
    ]
  };

  addRunningTotal() {
    let { transactionData, startBal } = this.state;
    console.log(transactionData);

    transactionData.map((el, i) => {
      console.log("in map function");
      if (el[i] === 0) {
        return (el[i].runningTotal = el[i].amount + startBal);
      } else if (el[i] > 0) {
        return (el[i].runningTotal = el[i - 1].amount + el[i].amount);
      }
    });
    console.log("out of map function");
    console.log("start Balance: ", startBal);
    console.log("amount: ", transactionData[0].amount);
    console.log("running total: ", transactionData[0].runningTotal);

    this.setState({ transactionData: transactionData, startBal: startBal });
  }

  componentDidMount() {
    this.addRunningTotal();
  }

  render() {
    let pendTransData = (
      <div>
        <h1>PendingTransactions</h1>
        <table>
          <tr>
            <th>Date</th>
            <th>Transaction</th>
            <th>Amount</th>
          </tr>
        </table>
        {this.state.pendingTransData.map((pendingTransData, index) => {
          return (
            <PendingTransactions
              key={pendingTransData.id}
              date={pendingTransData.date}
              transaction={pendingTransData.transaction}
              amount={pendingTransData.amount}
            />
          );
        })}
      </div>
    );

    let transData = (
      <div>
        <h1>Transaction Component</h1>
        <table>
          <tr>
            <th>Date</th>
            <th>Transaction</th>
            <th>Amount</th>
            <th>Running Total</th>
          </tr>
        </table>
        {this.state.transactionData.map((transactionData, index) => {
          return (
            <Transactions
              key={transactionData.id}
              date={transactionData.date}
              transaction={transactionData.transaction}
              amount={transactionData.amount}
              runningTotal={transactionData.runningTotal}
            />
          );
        })}
      </div>
    );

    return (
      <div className="App">
        <h1> Checking Account</h1>
        <TransactionSearch />
        {pendTransData}
        {transData}
      </div>
    );
  }
}

export default CheckingAccount;

Here is the child component where the data should appear.

import React from "react";

function Transactions(props) {
  return (
    <tr>
      <td>{props.date} </td>
      <td>{props.transaction}</td>
      <td>{props.amount}</td>
      <td>{props.runningTotal}</td>
    </tr>
  );
}

export default Transactions;

First, runningTotal attribute does not render in the component. I expected to see a column with the new data in the runningTotal attribute.

Answer 1

In addRunningTotal, It looks like it's how you've used map. In map((el, i) => {}) , el is a reference to the current iteration's value so where you've used el[i] (undefined), you wanted to use just el .

You also only need to use i (index) in your if statement.

This should do the trick (keeping reference to the previous value):

let prevAmount, running;
transactionData.map((el, i) => {
  if (i === 0) {
    running = el.runningTotal = el.amount + startBal;
    prevAmount = el.amount;

    return running;
  } else if (i > 0) {
    running = el.runningTotal = prevAmount + el.amount;
    prevAmount = el.amount;

    return running;
  }
});