Реакция. js: невозможно получить доступ к атрибуту объекта в объекте состояния

Question

Я работаю над финансовым трекером. Со временем финансовый трекер сможет получить доступ к учетной записи на банковском счете пользователя, проверять каждую транзакцию, и пользователь сможет добавлять транзакции в качестве будущих прогнозов. Идея состоит в том, чтобы дать пользователю возможность запускать финансовые прогнозы / сценарии ios, используя самую последнюю информацию о проверке / сохранении учетной записи в банковских счетах пользователя.

Я работаю над столбцом «промежуточный итог», который берет сумму, найденную в transactionData.amount, и добавляет transactionData.amount к startBal, если это «нулевой» индекс. В противном случае он будет использовать числа, найденные в предыдущем индексе для transactionData.runningTotal, и прибавит к значению, найденному в текущем индексе для TransactionsData.amount.

В любом случае новый расчет должен быть добавлен к текущему индексу дляactionData.runningTotal. Я по сути подражаю деталям онлайн-транзакций, если банк еще не предоставил эти данные.

Вот родительский компонент.

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;

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

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;

Во-первых, атрибут runningTotal не отображается в компоненте. Я ожидал увидеть столбец с новыми данными в атрибуте runningTotal.

Answer 1

В addRunningTotal, похоже, вы использовали карту. В map((el, i) => {}), el является ссылкой на значение текущей итерации, поэтому, где вы использовали el[i] (не определено), вы хотели использовать только el.

Вам также нужно использовать только i (индекс) в вашем операторе if.

Это должно помочь (сохраняя ссылку на предыдущее значение):

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;
  }
});