javascript - 显示到小数点后两位 - React.Js

Question

我正在尝试将计算结果显示为小数点后两位。我创建的函数具有从对象(“金额”属性)获取属性的行为，并将其添加到起始余额 (startBal) 或将其添加到先前的 runningTotal 属性 (runnigTotal)。完成此计算后，我希望结果显示到小数点后两位，因为这是我正在编写的财务应用程序。

我正在尝试使用 .toFixed() 方法，但实际上我并没有绑定(bind)这个方法，我只是想让它工作。

这是我的主要组成部分。相关函数是addRunningTotal()

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('start Balance: ', startBal);
    let prevAmount, running;
    transactionData.map((el, i) => {
      if (i === 0) {
        running = el.runningTotal = el.amount + startBal;
        prevAmount = el.runningTotal;

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

        console.log(running.toFixed(2))
        return running.toFixed(2);
      }
    });
    console.log('out of map function')
    console.log(transactionData);

    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;

我希望看到运行总计列显示到小数点后两位，但由于某种原因它显示到小数点后大约 13 位。我更加困惑，因为我使用的 console.log 输出到小数点后两位。

Answer 1

您看到多于两位小数的原因是您设置了 runningTotal transactionData 的每个元素的键至 running不打电话 toFixed .您在登录时会看到所需的格式，因为您调用了 toFixed记录时。

要解决此问题，我建议删除 toFixed来自 runningTotal完全计算并且只使用toFixed在render方法，因为它应该仅用于演示目的。

例子:

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

  );
}

此外，我建议重构 addRunningTotal使阅读更清晰并避免直接状态操作的方法。例如:

addRunningTotal() {
  const { transactionData, startBal } = this.state;

  console.log('start Balance: ', startBal);
  let running = startBal;
  const transactionDataWithRunningTotals = transactionData.map(el => {
    running += el.amount;
    return {
      ...el,
      runningTotal: running,
    }
  });
  console.log('out of map function')
  console.log(transactionData);

  this.setState({ transactionData: transactionDataWithRunningTotals });
}

为了处理初始渲染时的问题，我会将您的组件更新为如下所示:

class CheckingAccount extends Component {
  constructor(props) {
    super(props);

    this.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: this.withRunningTotals([
        {
          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
        },
      ]),
    }
  }

  withRunningTotals() {
    const { transactionData, startBal } = this.state;

    let running = startBal;
    return transactionData.map(el => {
      running += el.amount;
      return {
        ...el,
        runningTotal: running,
      }
    });
  }

  render() {
    // ...
  }
};