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

Posted 2023-02-22

【中文标题】React.js：无法访问状态对象中的对象属性

【英文标题】：React.js: Unable to access object attribute within state object

【发布时间】：2020-06-14 07:38:53

【问题描述】：

我正在开发一个财务跟踪器。最终，财务跟踪器将能够访问用户银行账户中的账户，提取每笔交易，并且用户将能够添加交易作为未来的预测。这个想法是让用户能够使用用户银行账户中的最新支票/储蓄账户信息来运行财务预测/方案。

我正在处理“运行总计”列，该列采用在transactionData.amount 中找到的金额，如果这是“零”索引，则将transactionData.amount 添加到startBal。否则，它将使用在先前索引中找到的 transactionData.runningTotal 的数字并添加到在当前索引中找到的 transactionData.amount 的值。

在任何一种情况下，都应将新计算添加到 transactionData.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 属性中看到一个包含新数据的列。

【参考方案1】：

在 addRunningTotal 中，看起来这就是您使用地图的方式。在map((el, i) => ) 中，el 是对当前迭代值的引用，因此在您使用el[i]（未定义）的地方，您只想使用el。

您也只需要在 if 语句中使用 i（索引）。

这应该可以解决问题（保持对先前值的引用）：

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

【讨论】：

感谢您的帮助。你让我走上正轨。我确实必须进行一项小改动才能使该功能也像我需要的那样添加。 prevAmount = el.runningTotal; 这使得函数像我需要的那样添加。其他一切都完全按照您的建议。谢谢！